React-Native Как реализовать тёмный режим?

Question

Привет, я хочу реализовать темный режим для моего приложения. У меня есть файл с именем 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;

Answer 1

Вы можете использовать библиотеку реагировать-родной-темный режим из ссылки ниже. Также ознакомьтесь с приведенным ниже примером.

Режим реагирования в естественном темноте

Приложение. js

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

state = {
      mode: initialMode,
};

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

Вы можете передать состояние в своем ScreenProps поддерживает вашу навигацию AppContainer, если вы используете React Navigation.

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',
};

Это пример того, как вы можете использовать ответ-нативный-темный-режим чтобы заставить работать темный режим.

Answer 2

Создайте Theme Manager в форме React Context, который предоставит компонентам приложения текущую тему и функцию toggle () для переключения между темами