我想在我的应用程序中实现暗模式和黑模式,而我的方式是用户从一个类切换暗/黑模式,在该类中我希望将状态更新为所有类,类如下:
AppearanceToggle类
state = {
BlackModeValue: null,
DarkModeValue: null
};
componentDidMount = () => {
AsyncStorage.getItem('DarkModeValue').then(value => this.setState({ DarkModeValue: JSON.parse(value) }));
AsyncStorage.getItem('BlackModeValue').then(value => this.setState({ BlackModeValue: JSON.parse(value) }));
};
//AsyncStorage.setItem .........
render() {
return (
<ScrollView style={[ styles.View , this.state.DarkModeValue ? darkmode.ASView : null || this.state.BlackModeValue ? blackmode.ASView : null ]}>
<SettingsList borderColor='#c8c7cc' defaultItemSize={50}>
<SettingsList.Item
hasSwitch={true}
switchState={this.state.DarkModeValue}
switchOnValueChange={//Goes to asyncStorage.setItem method}
title='Dark Mode'
/>
<SettingsList.Item
hasSwitch={true}
switchState={this.state.BlackModeValue}
switchOnValueChange={//Goes to asyncStorage.setItem method}
title='Black Mode'
/>
</SettingsList>
</ScrollView>
);
}
}
然后在要设置.getItem并更改状态的类(即SettingsScreen.js,这是导航到AppearanceToggle的屏幕)中,如下所示:
state = {
switchValue: false,
rated: false,
DarkModeValue:null,
BlackModeValue:null,
};
componentDidMount = () => {
AsyncStorage.getItem('DarkModeValue').then(value => this.setState({ DarkModeValue: JSON.parse(value) }));
AsyncStorage.getItem('BlackModeValue').then(value => this.setState({ BlackModeValue: JSON.parse(value) }));
};
render() {
return (
<ScrollView style={[ styles.View , this.state.DarkModeValue ? styles.DMView : null || this.state.BlackModeValue ? styles.BMView : null ]}>
..........
</ScrollView>
我遇到的问题是,当我更改开关时,它会立即影响AppearanceToggleScreen类,但不会影响SettingsScreen,除非我刷新应用程序。有没有一种方法可以使所有人立即受到影响?
答案 0 :(得分:1)
也许传播它的最好方法是使用Context或根组件来监听AppComponent
中的更改。例如
因此,您将创建一个主题上下文,如:
export const themes = {
blackMode: {
foreground: '#000000',
background: '#eeeeee',
},
darkMode: {
foreground: '#2f4f4ff',
background: '#222222',
},
};
export const ThemeContext = React.createContext(
themes.darkMode // default value
)
;
您的AppearanceToggle
类的内容如下:
import {ThemeContext} from './theme-context';
class ThemedButton extends Component {
render() {
let props = this.props;
let theme = this.context;
return (
<button
{...props}
style={{backgroundColor: theme.background}}
/>
);
}
}
ThemedButton.contextType = ThemeContext;
export default ThemedButton;
然后您的AppComponent
可能是
import {ThemeContext, themes} from './theme-context';
import ThemedButton from './themed-button';
function Toolbar(props) {
// Render your customized toolbar here and bind the changeTheme function to it
}
class App extends Component {
constructor(props) {
super(props);
};
componentDidMount = () => {
AsyncStorage.getItem('selectedTheme').then(value => this.setState({ selectedTheme: JSON.parse(value) }));
};
this.toggleTheme = () => {
this.setState(state => ({
theme:
state.theme === themes.darkMode
? themes.blackMode
: themes.darkMode,
}));
};
}
render() {
// The ThemedButton button inside the ThemeProvider
// uses the theme from state while the one outside uses
// the default dark theme
return (
<Page>
<ThemeContext.Provider value={this.state.theme}>
<Toolbar changeTheme={this.toggleTheme} />
</ThemeContext.Provider>
<Section>
<ThemedButton />
</Section>
</Page>
);
}
}
更多read
答案 1 :(得分:1)
问题在于,您正在AppearanceToggleScreen
中更改状态,因此将组件重新呈现(具有新主题),但是因为SettingsScreen
已在导航堆栈中(因为componentDidMount
不再执行。
现在,也许您想使用Context API来全局访问值,或执行类似this的操作。