我想更改应用程序的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/
只能工作一页,但可以像在设置中那样在全局中工作,因为我在设置页面中编写代码,但在个人资料页面或主页中却无法工作。
我很累...........
答案 0 :(得分:3)
我创建了一个按钮来更改所有屏幕的背景色。这就是你想要的吗?
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'
}
}