Сохраните данные и получите их на другой странице - React Native - PullRequest
0 голосов
/ 28 апреля 2020

Я делаю переключатель между темами. И у меня есть проблема. Если я перешел, например, из темного в светлый режим на одной странице, другие страницы не меняют тему. Как я могу изменить тему всех страниц в моем приложении? Или я могу просто перезагрузить приложение? Если да, как я могу это сделать?

Для всех сохранений я использую 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 (


                  ..//
            );
  }
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...