如何通过 React Native 中的 Toggle 更改主题颜色? [英] How to change theme color throught the Toggle in React Native?

问题描述

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

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

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

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've created a single button to change the background color of all the screens. Is this what you want?

示例链接由我创建

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

这篇关于如何通过 React Native 中的 Toggle 更改主题颜色?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！