如何通过 React Native 中的 Toggle 更改主题颜色？

Question

我想更改应用程序的theme 颜色。就像我现在的主题很轻，但我想通过帮助切换按钮来更改暗模式之类的主题。 我的应用程序正在做一些工作。链接：https://www.howtogeek.com/361407/how-to-enable-dark-mode-for-youtube/

我构建了这个应用程序，但在全球范围内不工作，它只能在当前页面工作，就像在设置页面工作一样，但不能在主页或个人资料页面工作

我没有源代码，但我使用这种类型https://www.seishin.me/dynamic-switching-of-themes-in-react-native-app/

只有一页工作，但在全局工作，就像在设置中工作一样，因为我在设置页面中编写代码，但在个人资料页面或主页中不工作。

我累了…………

Answer 1

我创建了一个按钮来更改所有屏幕的背景颜色。这是你想要的吗？

Example link由我创建

import React,{Component} from 'react';
import { Button, Text, View } from 'react-native';
import { createStackNavigator } from 'react-navigation';
import { AppContextProvider,AppConsumer } from './AppContextProvider'
import { BlueGray, LightGreen } from './Themes'

export default class App extends Component {
  render() {
    return ( <AppContextProvider>
                <MyNavigator />
            </AppContextProvider>);
  }
}


class ScreenComponentOne extends React.Component {
  static navigationOptions = {
    headerTitle: 'First screen',
  };

  render() {
    return (
      <AppConsumer>
          { appConsumer => (
      <View
        style={{
          flex: 1,
          justifyContent: 'center',
          backgroundColor: appConsumer.theme.colors.primary
        }}>
        <Button
          title="Go to two"
          onPress={() => this.props.navigation.navigate('RouteNameTwo')}
        />
        <Button onPress={ () => appConsumer.updateTheme(BlueGray) } title="Blue Gray Theme"></Button>
        <Button onPress={ () => appConsumer.updateTheme(LightGreen) } title="Light Green Theme"></Button>
      </View>
                      )}
            </AppConsumer>
    );
  }
}

class ScreenComponentTwo extends React.Component {
  static navigationOptions = {
    headerTitle: 'Second screen',
  };

  render() {
    return (
            <AppConsumer>
          { appConsumer => (
      <View
        style={{
          flex: 1,
          justifyContent: 'center',
          backgroundColor: appConsumer.theme.colors.primary
        }}>
        <Button
          title="Go to three"
          onPress={() =>
            this.props.navigation.navigate('RouteNameThree')
          }
        />
         <Button
          title="Go back"
          onPress={() => this.props.navigation.goBack()}
        />
      </View>
                            )}
            </AppConsumer>
    );
  }
}

class ScreenComponentThree extends React.Component {
  static navigationOptions = ({ navigation }) => {
    return {
      headerTitle: `Number: ${navigation.getParam('randomNumber')}`,
    };
  };

  render() {
    return (
      <AppConsumer>
          { appConsumer => (
      <View
        style={{
          flex: 1,
          justifyContent: 'center',
          alignItems: 'center',
          backgroundColor: appConsumer.theme.colors.primary
        }}>
        <Button
          title="Add another two"
          onPress={() => this.props.navigation.push('RouteNameTwo')}
        />
        <Button
          title="Go back"
          onPress={() => this.props.navigation.goBack()}
        />
      </View>
                            )}
            </AppConsumer>
    );
  }
}

const MyNavigator = createStackNavigator(
  {
    RouteNameOne: ScreenComponentOne,
    RouteNameTwo: ScreenComponentTwo,
    RouteNameThree: ScreenComponentThree,
  },
  {
    // headerTransitionPreset: 'uikit',
    // mode: 'modal',
  }
);

AppContextProvider.js

import React, { Component } from "react";
import { BlueGray, LightGreen } from './Themes'

const Context = React.createContext();

export class AppContextProvider extends Component {
    state = {
        theme: LightGreen,
        updateTheme: (theme) => {
            this.setState({ theme: theme })
        }
    }

    render() {
        const { theme } = this.state
        return (
            <Context.Provider value={ this.state }  theme={ theme } >
                    { this.props.children }
            </Context.Provider>
        )
    }
}

export const AppConsumer = Context.Consumer;
export const AppContext = Context;

Themes.js

import { DefaultTheme } from "react-native-paper";

export const BlueGray = {
    ...DefaultTheme,
    colors: {
        ...DefaultTheme.colors,
        primary: '#607d8b'
    }
}

export const LightGreen = {
    ...DefaultTheme,
    colors: {
        ...DefaultTheme.colors,
        primary: '#8bc34a'
    }
}