React-Native 如何實現暗模式？

Question

您好，我想為我的應用程序實現暗模式。 我有一個名為 ColorSchemes.js 的文件，其中定義了基本主題和深色主題。 那么我怎么能在這個文件上實現主題化。 我想在全球范圍內進行主題之間的保存切換！

顏色方案.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;

Answer 1

以 React Context 的形式創建一個主題管理器，它將為應用程序組件提供當前主題，以及一個 toggle() function 在主題之間切換

Answer 2

您可以使用下面鏈接中的 react-native-dark-mode 庫。 另請查看下面的示例。

反應原生暗模式

應用程序.js

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

state = {
      mode: initialMode,
};

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

如果您使用 React Navigation，則可以在導航 AppContainer 的 ScreenProps 道具中傳遞 state。

顏色方案.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 來使暗模式工作的示例。