Как я могу изменить родительское состояние через компонент реагирующей навигации?

Question

Я новичок в React Native и не могу понять, как это сделать.В настоящее время у меня есть структура приложения примерно такая:

App.js -> Authentication.js -> if (state.isAuthenticated) Homepage.js, еще Login.js

Я сейчас нахожусьизменение состояния isAuthenticated на кнопке выхода на домашней странице.Сейчас я пытаюсь добавить в приложение навигатор в виде ящика, который будет возвращен на страницу аутентификации вместо домашней страницы.Поэтому я не уверен, как передать изменение состояния через компонент bottomnavigator на страницу аутентификации.

В настоящее время на моей домашней странице есть кнопка, которая имеет:

onPress={() => this.props.logout()}

И на странице аутентификации есть:

export default class Authentication extends Component {
  constructor(props){
    super(props);

    this.state = {
      isAuthenticated: false,
      isLoading: false
    }

    this.login = this.login.bind(this);
    this.logout = this.logout.bind(this);
  }

  login() {
    AsyncStorage.setItem("user", JSON.stringify({email: this.state.email, password: this.state.password}))
      .then(results => {
        this.setState({isAuthenticated: true});
      });
  }

  logout() {
    AsyncStorage.clear()
      .then(result => {
          this.setState({isAuthenticated: false});
      });
  }

  componentDidMount(){
    this.setState({isLoading: true});
    AsyncStorage.getItem("user")
        .then(results => {
          const data = JSON.parse(results);
          if (data) {
            this.setState({isAuthenticated: true});
          }
          this.setState({isLoading: false});
        });
  }

  render() {
    if (this.state.isLoading){
      return(
        <Splashpage />
      );
    }
    if (!this.state.isAuthenticated){
      return (
        <Login login={this.login}/>
      );
    }
    return (
      <Homepage logout={this.logout}/>
    );
  }
}

Итак, я создал страницу Navigation.js, где я 'Я создаю ящик-навигацию и собираюсь вернуть это вместо главной страницы.

export default Navigation = createDrawerNavigator({
    Home: {
      screen: Homepage,
    },
    WebView: {
      screen: WebView,
    },
});

Но я не уверен, как передать изменение состояния с домашней страницы через компонент навигации на родительскую страницу аутентификации.Любая помощь приветствуется.

Answer 1

Вы можете передать обратный вызов через навигацию:

this.props.navigation.navigate('yourTarget',{callback:function});

В yourTraget вы можете получить к нему доступ через:

this.props.navigation.state.params.callback(isAuthenticated)

Здесь документация: https://reactnavigation.org/docs/en/params.html

Я надеюсь, что это то, что вы искали!О, теперь я вижу, вы спросили об этом уже некоторое время назад.Может быть, вы уже перешли ...