Question

我是React Native的新手，无法弄清楚如何实现这一目标。目前我的应用程序结构如下：

App.js - ＆gt; Authentication.js - ＆gt; if（state.isAuthenticated）Homepage.js，否则Login.js

我目前正在主页上的注销按钮上更改isAuthenticated状态。我现在正在尝试将抽屉导航器添加到应用程序中，这将返回到身份验证页面而不是主页。所以我不确定如何通过drawernavigator组件将状态更改传递给Authentication页面。

目前我的主页上有一个按钮：

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页面，我正在创建一个drawernavigator，并将返回此而不是主页。

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

我希望这就是您想要的！哦，现在我看到你已经问了一段时间。也许您已经继续...

如何通过反应导航组件更改父状态？

1 个答案: