美文网首页react-native
React Native 暗黑模式适配方案

React Native 暗黑模式适配方案

作者: mtry | 来源:发表于2021-02-04 19:35 被阅读0次

通过 React Native 中自带的 Appearance 实现

Appearance 提供的 API

type ColorSchemeName = 'light' | 'dark' | null | undefined;

export namespace Appearance {
    type AppearancePreferences = {
        colorScheme: ColorSchemeName;
    };
    type AppearanceListener = (preferences: AppearancePreferences) => void;

    export function getColorScheme(): ColorSchemeName;
    export function addChangeListener(listener: AppearanceListener): void;
    export function removeChangeListener(listener: AppearanceListener): void;
}

export function useColorScheme(): ColorSchemeName;

考虑到项目都是通过 class 实现，那么我们优先研究非 Hook 方式如何实现。

这里有两个问题需要注意：

  • 暗黑模式和正常模式之间来回切换
  • 暗黑模式和正常模式下颜色匹配逻辑

暗黑模式和正常模式之间来回切换

根据上面的 API，我们很容易用到 addChangeListener 方法来监听。但是这里有个问题需要考虑，如果 App 的暗黑模式只追随系统变化，那么就简单很多了，接下来只需要考虑，如何优雅的实现即可。实际业务中有很多场景是根据当前 App 的设置而定的。

Appearance 提供的 API 只能读取状态，没法修改。在实践中我们发现在原生中修改暗黑模式的状态 RN 的 Appearance 响应，Android 可以做到，而 iOS 暂时没有找到方法；

Android 通过获取 RN 当前的环境是可以修改

reactContext.getResources().getConfiguration().uiMode = UI_MODE_NIGHT_YES;

iOS 原生中修改 RCTRootView 的 overrideUserInterfaceStyle 属性，或者遍历当前 RN 视图进行修改， RN 的 Appearance 是没法响应的。

React Native 内部的实现可以参考 react-native-appearance

小结

如果 App 需要支持自定义切换暗黑模式（不追随系统变化而变化），那么通过 React-Native 中 Appearance 暂时是无法实现的。

React Native 读取原生自定义暗黑模式状态

既然 RN 的暗黑模式只通过原生读取，那么在 RN 中的状态也只能自定义了，同样上面两个问题也需要解决。

  • 暗黑模式和正常模式之间来回切换
  • 暗黑模式和正常模式下颜色匹配逻辑

暗黑模式和正常模式之间来回切换

原生通知各个 RN 模板进行变化即可，当然为了避免各个模块的子视图做重复监听，可以通过 Provider 来实现。

以 iOS 为例，原生需要支持

  • 初始 RN 模块时，提供暗黑模式状态
  • 原生暗黑模式变化时，通知 RN 模块
// 初始 RN 模块时，提供暗黑模式状态
NSMutableDictionary *initialProperties = [NSMutableDictionary dictionary];
initialProperties[@"isDark"] = @(false);
#ifdef __IPHONE_13_0
if (@available(iOS 13.0, *))
{
    BOOL isDark = UIApplication.sharedApplication.keyWindow.traitCollection.userInterfaceStyle == UIUserInterfaceStyleDark;
    initialProperties[@"isDark"] = @(isDark);
}
#endif
NSURL *jsCodeLocation = [[NSBundle mainBundle] URLForResource:@"index.ios"
                                                withExtension:@"jsbundle"
                                                 subdirectory:@"bundle"];
RCTRootView *rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation
                                                    moduleName:@"XXXRNModuleName"
                                             initialProperties:initialProperties
                                                 launchOptions:nil];

// 原生暗黑模式变化时，通知 RN 模块
- (void)traitCollectionDidChange:(UITraitCollection *)previousTraitCollection
{
    [super traitCollectionDidChange:previousTraitCollection];
    
#ifdef __IPHONE_13_0
    if (@available(iOS 13.0, *))
    {
        BOOL isDark = NO;
        if (self.traitCollection.userInterfaceStyle == UIUserInterfaceStyleDark)
        {
            isDark = YES;
        }
        NSDictionary *dict = @{@"isDark": @(isDark)};
        NSError *parseError = nil;
        NSData *jsonData = [NSJSONSerialization dataWithJSONObject:dict
                                                           options:NSJSONWritingPrettyPrinted
                                                             error:&parseError];
        if (jsonData)
        {
            NSString *jsonString = [[NSString alloc] initWithData:jsonData encoding:NSUTF8StringEncoding];
            if (jsonString)
            {
                NSMutableDictionary *appProperties = [NSMutableDictionary dictionary];
                if (_rootView.appProperties)
                {
                    [appProperties addEntriesFromDictionary:_rootView.appProperties];
                }
                appProperties[@"isDark"] = @(isDark);
                _rootView.appProperties = appProperties;
                [_rootView.bridge enqueueJSCall:@"RCTDeviceEventEmitter"
                                         method:@"emit" args:@[@"onChangeDarkMode", jsonString]
                                     completion:nil];
            }
        }
    }
#endif
}

在 RN 模块中，比较自然的想到统一监听原生的暗黑模式状态变化以及通过 Provider 为子视图提供统一的状态

interface DarkModeProviderProps {
  isDark: boolean;
  children: ReactNode;
}

interface DarkModeProviderState {
  isDark: boolean;
}

let subscription: EmitterSubscription;
export class DarkModeProvider extends Component<DarkModeProviderProps, DarkModeProviderState>  {
  constructor(props: DarkModeProviderProps) {
    super(props);
    this.state = {
      isDark: props.isDark
    }
  }

  componentDidMount() {
    subscription = DeviceEventEmitter.addListener("onChangeDarkMode", (e) => {
      const jsonObj = JSON.parse(e);
      if (jsonObj) {
        this.setState({
          isDark: jsonObj.isDark
        })
      }
    });
  }

  render() {
    return (
      <DarkModeContext.Provider value={{'isDark': this.props.isDark}} {...this.props} />
    )
  }
}

export const DarkModeContext = React.createContext({'isDark': false});

接下来看一下业务的实现

class TestMain extends Component {
  static contextType = DarkModeContext;
  render() {
    const containerBackgroundColor = this.context.isDark ? '#0D0D0D' : '#F7F7F7';
    const contentContainerBackgroundColor = this.context.isDark ? '#1C1C1C' : '#FFFFFF';
    const titleColor = this.context.isDark ? '#F2F2F2' : '#262626';
    const subTitleColor = this.context.isDark ? '#BBBBBB' : '#8C8C8C';
    return (
      <View style={{...mainStyles.container, backgroundColor: containerBackgroundColor}}>
        <View style={{...mainStyles.contentContainer, backgroundColor: contentContainerBackgroundColor}}>
          <Text style={{...mainStyles.title, color: titleColor}}>
            {'大标题'}
          </Text>
          <Text style={{...mainStyles.subTitle, color: subTitleColor}}>
            {'小标题小标题小标题小标题小标题小标题小标题小标题小标题小标题小标题小标题小标题'}
          </Text>
        </View>
      </View>
    )
  }
}

interface RootTestProps {
  isDark: boolean;
}
export default class RootTest extends Component<RootTestProps> {
  render() {
    return (
        <DarkModeProvider isDark={this.props.isDark}>
          <TestMain />
        </DarkModeProvider>
    );
  }
};

通过上面的方式，业务需求也是可以实现的，只是方式有点难看。

img1 img2

接下来就是如果把实现方式变得优雅一些

每个地方都来写把暗黑模式和正常模式下的颜色很冗余，也不利于统一管理，比较容易想到就是封装一个 DarkColorUtility 来统一管理颜色。这样会遇到一个问题，在 DarkColorUtility 中如何获取 DarkModeContext

根据发现只能通过 hook 的方式才能获取 DarkModeContext，那么 TestMain 也只能改成 function 的方式，第一步优化之后的效果

// 工具类方法
function darkModeColor(light: string, dark: string) {
  const context = useContext(DarkModeContext);
  if (context.isDark) {
    return dark;
  } else {
    return light;
  }
}

export class DarkColorUtility extends Component {
  static color_F7F7F7() {
    return darkModeColor('#F7F7F7', '#0D0D0D');
  }
  static color_FFFFFF() {
    return darkModeColor('#FFFFFF', '#1C1C1C');
  }
  static color_262626() {
    return darkModeColor('#262626', '#F2F2F2');
  }
  static color_8C8C8C() {
    return darkModeColor('#8C8C8C', '#BBBBBB');
  }
}

业务调整之后的方式

function TestMain() {
  return (
    <View style={{ ...mainStyles.container, backgroundColor: DarkColorUtility.color_F7F7F7() }}>
      <View style={{ ...mainStyles.contentContainer, backgroundColor: DarkColorUtility.color_FFFFFF() }}>
        <Text style={{ ...mainStyles.title, color: DarkColorUtility.color_262626() }}>
          {'大标题'}
        </Text>
        <Text style={{ ...mainStyles.subTitle, color: DarkColorUtility.color_8C8C8C() }}>
          {'小标题小标题小标题小标题小标题小标题小标题小标题小标题小标题小标题小标题小标题'}
        </Text>
      </View>
    </View>
  )
}

这一步其实已经差不多了，在实际开发用很多同学其实不怎么喜欢用 StyleSheet 来创建 style，比如

function TestMain() {
  return (
    <View style={{ flex: 1, backgroundColor: DarkColorUtility.color_F7F7F7() }}>
      <View style={{ flex: 1, marginTop: 16, padding: 16, backgroundColor: DarkColorUtility.color_FFFFFF() }}>
        <Text style={{ fontSize: 20, marginBottom: 8, color: DarkColorUtility.color_262626() }}>
          {'大标题'}
        </Text>
        <Text style={{ fontSize: 16, lineHeight: 20, color: DarkColorUtility.color_8C8C8C() }}>
          {'小标题小标题小标题小标题小标题小标题小标题小标题小标题小标题小标题小标题小标题'}
        </Text>
      </View>
    </View>
  )
}

这样在实际调试中比较方法，不需要在 StyleSheet 中业务中来回找，同时在那些特别复杂的界面命名的负担也是很重的。

不过考虑到还是有很多同学喜欢用 StyleSheet，那么就继续思考，怎样在 StyleSheet 中写 DarkColorUtility 中的工具方法。

为了在 StyleSheet 中直接使用 DarkColorUtility 中的工具方法，发现只能对 StyleSheet 进行重新封装了。这里我们就直接参考 react-native-dynamic 的实现。

function parseStylesFor(styles, mode) {
    const newStyles = {};
    let containsDynamicValues = false;
    for (const i in styles) {
        const style = styles[i];
        const newStyle = {};
        for (const i in style) {
            const value = style[i];
            if (value instanceof DynamicValue) {
                containsDynamicValues = true;
                newStyle[i] = value[mode];
            }
            else {
                newStyle[i] = value;
            }
        }
        newStyles[i] = newStyle;
    }
    if (!containsDynamicValues && process.env.NODE_ENV !== 'production') {
        console.warn('A DynamicStyleSheet was used without any DynamicValues. Consider replacing with a regular StyleSheet.');
    }
    return newStyles;
}
export class DynamicStyleSheet {
    constructor(styles) {
        this.dark = StyleSheet.create(parseStylesFor(styles, 'dark'));
        this.light = StyleSheet.create(parseStylesFor(styles, 'light'));
    }
}
export const useDynamicStyleSheet = useDynamicValue;

在 DynamicStyleSheet 使用的 DynamicValue 相当于 DarkColorUtility。

export class DynamicValue {
    constructor(light, dark) {
        this.light = light;
        this.dark = dark;
    }
}

业务效果如下

const mainDynamicStyles = new DynamicStyleSheet({
  container: {
    flex: 1,
    backgroundColor: DarkMode.color_F7F7F7()
  },
  contentContainer: {
    flex: 1,
    marginTop: 16,
    padding: 16,
    backgroundColor: DarkMode.color_FFFFFF()
  },
  title: {
    fontSize: 20,
    marginBottom: 8,
    color: DarkMode.color_262626()
  },
  subTitle: {
    fontSize: 16,
    lineHeight: 20,
    color: DarkMode.color_8C8C8C()
  }
});

function TestMain() {
  const styles = useDynamicValue(mainDynamicStyles);
  return (
    <View style={styles.container}>
      <View style={styles.contentContainer}>
        <Text style={styles.title}>
          {'大标题'}
        </Text>
        <Text style={styles.subTitle}>
          {'小标题小标题小标题小标题小标题小标题小标题小标题小标题小标题小标题小标题小标题'}
        </Text>
      </View>
    </View>
  )
}

几种方案对比

方案一：业务通过 class 实现

// 统一的工具方法，便于业务使用
function darkModeColor(light: string, dark: string, isDark: boolean = false) {
  if (isDark) {
    return dark;
  } else {
    return light;
  }
}
export class DarkColorUtility extends Component {
  static color_F7F7F7(isDark: boolean = false) {
    return darkModeColor('#F7F7F7', '#0D0D0D', isDark);
  }
  static color_FFFFFF(isDark: boolean = false) {
    return darkModeColor('#FFFFFF', '#1C1C1C', isDark);
  }
  static color_262626(isDark: boolean = false) {
    return darkModeColor('#262626', '#F2F2F2', isDark);
  }
  static color_8C8C8C(isDark: boolean = false) {
    return darkModeColor('#8C8C8C', '#BBBBBB', isDark);
  }
}


// 业务实现例子
class TestMain extends Component {
  static contextType = DarkModeContext;
  render() {
    return (
      <View style={{...mainStyles.container, backgroundColor: DarkColorUtility.color_F7F7F7(this.context.isDark)}}>
        <View style={{...mainStyles.contentContainer, backgroundColor: DarkColorUtility.color_FFFFFF(this.context.isDark)}}>
          <Text style={{...mainStyles.title, color: DarkColorUtility.color_262626(this.context.isDark)}}>
            {'大标题'}
          </Text>
          <Text style={{...mainStyles.subTitle, color: DarkColorUtility.color_8C8C8C(this.context.isDark)}}>
            {'小标题小标题小标题小标题小标题小标题小标题小标题小标题小标题小标题小标题小标题'}
          </Text>
        </View>
      </View>
    )
  }
}
interface RootTestProps {
  isDark: boolean;
}
export default class RootTest extends Component<RootTestProps> {
  render() {
    return (
        <DarkModeProvider isDark={this.props.isDark}>
          <TestMain />
        </DarkModeProvider>
    );
  }
};

方案二：业务通过 function 实现，同时不用 StyleSheet 来创建 style

// 统一的工具方法，便于业务使用
function darkModeColor(light: string, dark: string) {
  const context = useContext(DarkModeContext);
  if (context.isDark) {
    return dark;
  } else {
    return light;
  }
}
export class DarkColorUtility extends Component {
  static color_F7F7F7() {
    return darkModeColor('#F7F7F7', '#0D0D0D');
  }
  static color_FFFFFF() {
    return darkModeColor('#FFFFFF', '#1C1C1C');
  }
  static color_262626() {
    return darkModeColor('#262626', '#F2F2F2');
  }
  static color_8C8C8C() {
    return darkModeColor('#8C8C8C', '#BBBBBB');
  }
}

// 业务实现例子
function TestMain() {
  return (
    <View style={{ flex: 1, backgroundColor: DarkColorUtility.color_F7F7F7() }}>
      <View style={{ flex: 1, marginTop: 16, padding: 16, backgroundColor: DarkColorUtility.color_FFFFFF() }}>
        <Text style={{ fontSize: 20, marginBottom: 8, color: DarkColorUtility.color_262626() }}>
          {'大标题'}
        </Text>
        <Text style={{ fontSize: 16, lineHeight: 20, color: DarkColorUtility.color_8C8C8C() }}>
          {'小标题小标题小标题小标题小标题小标题小标题小标题小标题小标题小标题小标题小标题'}
        </Text>
      </View>
    </View>
  )
}
interface RootTestProps {
  isDark: boolean;
}
export default class RootTest extends Component<RootTestProps> {
  render() {
    return (
        <DarkModeProvider isDark={this.props.isDark}>
          <TestMain />
        </DarkModeProvider>
    );
  }
};

方案三：业务通过 function 实现，同时也要用 StyleSheet 来创建 style，借助 react-native-dynamic 来实现

// 统一的工具方法，便于业务使用
export class DarkMode {
  static color_F7F7F7() {
    return new DynamicValue('#F7F7F7', '#0D0D0D');
  }
  static color_FFFFFF() {
    return new DynamicValue('#FFFFFF', '#1C1C1C');
  }
  static color_262626() {
    return new DynamicValue('#262626', '#F2F2F2');
  }
  static color_8C8C8C() {
    return new DynamicValue('#8C8C8C', '#BBBBBB');
  }
}

// 业务实现列子
const mainDynamicStyles = new DynamicStyleSheet({
  container: {
    flex: 1,
    backgroundColor: DarkMode.color_F7F7F7()
  },
  contentContainer: {
    flex: 1,
    marginTop: 16,
    padding: 16,
    backgroundColor: DarkMode.color_FFFFFF()
  },
  title: {
    fontSize: 20,
    marginBottom: 8,
    color: DarkMode.color_262626()
  },
  subTitle: {
    fontSize: 16,
    lineHeight: 20,
    color: DarkMode.color_8C8C8C()
  }
});
function TestMain() {
  const styles = useDynamicValue(mainDynamicStyles);
  return (
    <View style={styles.container}>
      <View style={styles.contentContainer}>
        <Text style={styles.title}>
          {'大标题'}
        </Text>
        <Text style={styles.subTitle}>
          {'小标题小标题小标题小标题小标题小标题小标题小标题小标题小标题小标题小标题小标题'}
        </Text>
      </View>
    </View>
  )
}
interface RootTestProps {
  isDark: boolean;
}
export default class RootTest extends Component<RootTestProps> {
  render() {
    return (
        <DarkModeProvider isDark={this.props.isDark}>
          <TestMain />
        </DarkModeProvider>
    );
  }
};

总结

  • 推荐项目尽量通过 Hook 的方式来实现
  • 推荐项目适配暗黑模式采用上面方案三

相关文章

  • React Native 暗黑模式适配方案

    通过 React Native 中自带的 Appearance 实现 Appearance 提供的 API 考虑到...

  • 百度APP iOS暗黑模式适配的完美解决方案

    百度APP iOS暗黑模式适配的完美解决方案百度APP iOS暗黑模式适配的完美解决方案

  • 暗黑模式开发

    iOS13暗黑模式适配（项目开发版） iOS 13 DarkMode 暗黑模式 IOS 暗黑模式适配---基础适配

  • iOS 暗黑模式适配(项目实战篇)

    通过上面两篇文章iOS 暗黑模式适配（方法介绍篇）iOS 暗黑模式适配（叨叨篇）我们知道了暗黑模式怎么去适配，那么...

  • iOS 开发之关闭暗黑模式

    对于现在很多应用不想适配暗黑模式或者来不及适配的，可以关闭暗黑模式。 全局关闭暗黑模式： 在 Info.plist...

  • iOS 暗黑模式适配

    DarkModeAdapter 简介 iOS 暗黑模式适配懒人版 普通模式（light）下： 暗黑模式（dark）...

  • iOS：暗黑模式适配

    简介：iOS13苹果推出的暗黑模式，在去年苹果已经声明必须适配暗黑模式否则会下架。网上有很多好的文章来适配暗黑模式...

  • Xcode 升级11 适配 ⚠️记录～

    1、关闭暗黑模式 ,如果没有适配暗黑模式，在暗黑模式下会很丑 2、 报错 library not found fo...

  • 2020-05-14

    #react-native-camera 解决方案 https://react-native-community....

  • 我的收藏

    结合flexible.js的rem布局方案 如何在Vue项目中使用vw实现移动端适配 React Native 项...

网友评论

    本文标题：React Native 暗黑模式适配方案

    本文链接：https://www.haomeiwen.com/subject/qqqitltx.html

    延伸阅读

    深度阅读

    • 您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

    栏目导航

    热点阅读

    react-native

    关于我们|服务条款|联系我们|React Native 暗黑模式适配方案|投稿指南|网站地图|RSS订阅|排版工具|手机版

    提供经典美文摘抄,优美散文欣赏,现代诗歌精选,短篇小说,心情随笔,表白情书范文,故事会在线阅读欣赏

    Copyright © 2014-2023 Haomeiwen.com All Rights Reserved. 好美文阅读网 版权所有

    备案信息：桂公网安备 45052102000051号 · 桂ICP备13007215号-3

    本站所收录作品、热点评论等信息部分来源互联网，目的只是为了系统归纳学习和传递资讯

    所有作品版权归原创作者所有，与本站立场无关，如不慎侵犯了你的权益，请联系我们告知，我们将做删除处理！