How to change theme color throught the Toggle in React Native?

问题

I want to change the theme color of the App. like my present theme is light but I want to change the theme like Dark Mode with helping the toggle button. Some work is doing in my Application. link: https://www.howtogeek.com/361407/how-to-enable-dark-mode-for-youtube/

I build this application but in not working Global, Its only work in the present page like working in the setting page but not working the home page or profile page

I don't have source code but I working this type https://www.seishin.me/dynamic-switching-of-themes-in-react-native-app/

only one-page working but working in the global like working in the setting because I code write code in the setting page, but not working in the profile page or Home Page.

I'm tired...........

回答1:

I've created a single button to change the background color of all the screens. Is this what you want?

Example link created by me

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

来源：https://stackoverflow.com/questions/57575157/how-to-change-theme-color-throught-the-toggle-in-react-native