Я делаю переключатель между темами. И у меня есть проблема. Если я перешел, например, из темного в светлый режим на одной странице, другие страницы не меняют тему. Как я могу изменить тему всех страниц в моем приложении? Или я могу просто перезагрузить приложение? Если да, как я могу это сделать?
Для всех сохранений я использую AsyncStorage
Помогите мне, пожалуйста
FirstPage.js
..///
constructor(props) {
super(props);
this.state = {
isEnabled: '',
theme: '',
loading: true
}
}
async componentDidMount() {
const value = await AsyncStorage.getItem('theme')
this.setState({
theme: value,
isEnabled: value == "black" ? true : false,
loading: false
})
this.props.navigation.setParams({
Theme: value == "black" ? "#171717" : "white"
});
}
onSave = async (data) => {
const { text } = this.state
await AsyncStorage.setItem("theme", data);
this.setState({
theme: data
})
Expo.Updates.reload();
}
toggleSwitch = () => {
this.setState({
isEnabled: this.state.isEnabled ? false : true,
})
if (this.state.isEnabled) {
this.onSave("white")
}
else {
this.onSave("black")
}
}
render() {
if (this.state.loading) {
return (
<View style={{flex: 1, paddingTop: 20}}>
<ActivityIndicator />
</View>
);
}
const { navigate } = this.props.navigation;
return (
<Text style={[styles.menuItem]}>Dark theme</Text>
<Switch
trackColor={{ false: "#767577", true: "#db0202" }}
thumbColor={this.state.isEnabled ? "#f4f3f4" : "#f4f3f4"}
onValueChange={this.toggleSwitch}
value={this.state.isEnabled}
style={{marginLeft: 10}}
/>
<Text>{this.state.theme}</Text>
<Text>{this.state.isEnabled ? "true" : "false"}</Text>
)
}
}
SecondPage.js
..//
class CoursesScreen extends React.Component {
constructor(props) {
super(props);
this.state = {
theme: '',
fontLoaded: false,
loading: true
}
}
async componentDidMount() {
componentWillMount() {
this.onLoad();
}
onLoad = async () => {
const value = await AsyncStorage.getItem('theme')
this.setState({
theme: value,
loading: false
})
this.props.navigation.setParams({
Theme: value == "black" ? "#171717" : "white"
});
}
render() {
if (this.state.loading) {
return (
<View style={{flex: 1, paddingTop: 20}}>
<ActivityIndicator />
</View>
);
}
const { navigate } = this.props.navigation;
return (
..//
);
}
}