我想更改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/
只有一页工作但在全局工作就像在设置中工作一样，因为我在设置页面中编写代码，但不在个人资料页面或主页中工作。
我累了...........
我创建了一个按钮来更改所有屏幕的背景颜色。这是你想要的吗？
我创建的示例链接
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;
主题.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'
}
}