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

Question

我想更改应用程序的主题 颜色。就像我现在的主题是浅色，但我想通过帮助切换按钮来更改深色模式等主题。我的应用程序中正在做一些工作。链接: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'
    }
}