React-Native 如何实现暗模式？答案

【问题标题】：React-Native How to implement dark mode?React-Native 如何实现暗模式？
【发布时间】：2020-04-19 15:17:10
【问题描述】：

您好，我想为我的应用实现暗模式。我有一个名为 ColorSchemes.js 的文件，其中定义了基本主题和深色主题。那么我怎么能在这个文件上实现主题化。我想在全局级别的主题之间进行保存切换！

ColorSchemes.js

const darkTheme = {
  main: palette.black,
  background: palette.dark_grey,
  alternative: palette.white_grey,
  trackCardGradient: palette.black,
  reviewCardGradient: palette.white_grey,
  reviewCardTitle: palette.white_grey,
  placeholderColor: palette.grey,
  main_font: palette.light_grey,
  second_font: palette.light_grey,
  empty_star_color: palette.white_grey,
  copy_right: palette.white,
  search_bar: searchBarDarkTheme,
  status_bar: statusBarDarkTheme,
};

const baseTheme = {
  main: palette.blue,
  background: palette.light_blue,
  alternative: palette.white_blue,
  trackCardGradient: palette.gradient_blue,
  reviewCardGradient: palette.white_blue,
  reviewCardTitle: palette.dark_blue,
  placeholderColor: palette.midd_blue,
  main_font: palette.light_blue,
  second_font: palette.blue,
  empty_star_color: palette.blue,
  copy_right: palette.black,
  search_bar: searchBarBaseTheme,
  status_bar: statusBarBaseTheme,
};

// export const colors = darkTheme;
export const colors = baseTheme;

【问题讨论】：

标签： javascript android ios react-native

【解决方案1】：

以 React Context 的形式创建一个主题管理器，它将为应用程序组件提供当前主题，以及一个用于在主题之间切换的 toggle() 函数

【讨论】：

【解决方案2】：

您可以使用以下链接中的 react-native-dark-mode 库。另请查看下面的示例。

React Native Dark Mode

App.js

import {initialMode, eventEmitter} from 'react-native-dark-mode';

state = {
      mode: initialMode,
};

componentDidMount() {
    eventEmitter.on('currentModeChanged', mode => {
      this.setState({mode});
    });
}

如果您使用 React Navigation，则可以在导航 AppContainer 中传递 ScreenProps 道具中的状态。

ColorSchemes.js

import { DynamicValue } from 'react-native-dark-mode';

const colorSet = {
  mainThemeBackgroundColor: new DynamicValue('#ffffff', '#000'),
  mainThemeForegroundColor: new DynamicValue('#4991ec', '#4991ec'),
  mainTextColor: new DynamicValue('#151723', '#ffffff'),
  mainSubtextColor: new DynamicValue('#7e7e7e', '#f5f5f5'),
  hairlineColor: new DynamicValue('#e0e0e0', '#222222'),
  subHairlineColor: new DynamicValue('#f2f2f3', '#f2f2f3'),
  tint: new DynamicValue('#3068CC', '#3068CC'),
  grey: new DynamicValue('grey', 'grey'),
  whiteSmoke: new DynamicValue('#f5f5f5', '#222222'),
  headerStyleColor: new DynamicValue('#ffffff', '#222222'),
  headerTintColor: new DynamicValue('#000000', '#ffffff'),
  bottomStyleColor: new DynamicValue('#ffffff', '#222222'),
  bottomTintColor: new DynamicValue('grey', 'lightgrey'),
  mainButtonColor: new DynamicValue('#e8f1fd', '#062246'),
  subButtonColor: new DynamicValue('#eaecf0', '#20242d'),
  tabColor: new DynamicValue('#ffffff', '#121212'),
};

const navThemeConstants = {
  light: {
    backgroundColor: '#fff',
    fontColor: '#000',
    secondaryFontColor: '#7e7e7e',
    activeTintColor: '#4991ec',
    inactiveTintColor: '#ccc',
    hairlineColor: '#e0e0e0',
  },
  dark: {
    backgroundColor: '#121212',
    fontColor: '#fff',
    secondaryFontColor: '#fff',
    activeTintColor: '#4991ec',
    inactiveTintColor: '#888',
    hairlineColor: '#222222',
  },
  main: '#4991ec',
};

这是一个关于如何使用 react-native-dark-mode 使暗模式工作的示例。

【讨论】：