Question

我是新的本地反应，目前正在开发一个需要登录的本机反应应用。成功登录后，视图将变为主页。 问题是我关闭并重新打开应用后，它再次向我显示了LoginPage 。 有没有办法将初始路由重定向到另一个页面

 class Main extends Component {

  _renderScene(route, navigator) {
      if (route.id === 1) {
        return <LoginPage navigator={navigator} />
      } else if (route.id === 2) {
        return <HomePage navigator={navigator} />
      } else if (route.id === 3) {
        return <DetailPage navigator={navigator} />
      }  else if (route.id === 4) {
        return <CreateBookingPage navigator={navigator} />
      }
  }

  _configureScene(route) {
    return Navigator.SceneConfigs.PushFromRight;
  }


  render() {
      return (
        <Navigator
        initialRoute={{id: 1, }}
        renderScene={this._renderScene}
        configureScene={ () => { return Navigator.SceneConfigs.PushFromRight; }} />
      );
  }
}

/////经过一些修改后我进入了这个但仍然在渲染登录是我做错了////////

   componentWillMount() {
    AsyncStorage.getItem('key').then( (value) => {
        if(value==="yes") {
            this.setState({ loader: false, logged: true})
        } else {
            this.setState({ loader: false })
        }
    })
}

render() {
    const routeId = this.state.logged ? 2 : 1;
    if(this.state.loader) {
        return (
            <View /> // loading screen
        );
    }
    return (
        <Navigator
            initialRoute={{id: routeId }}
            renderScene={this._renderScene}
            configureScene={ () => { return Navigator.SceneConfigs.PushFromRight; }} />
    );
}

Answer 1

替换渲染功能并尝试。

  render() {
    var loggedStatus = true; // change here for login screen
    var routeId = loggedStatus ? 2 : 1;
    return (
      <Navigator
      initialRoute={{id: routeId }}
      renderScene={this._renderScene}
      configureScene={ () => { return Navigator.SceneConfigs.PushFromRight; }} />
    );
 }

Answer 2

成功登录后，您可以在设备的本地存储中设置令牌/值，并在注销时清除此值。您可以检查此值以设置初始路线。 Asyncstorage可用于设置和删除记录的状态。

修改加载器的初始状态应为true，记录应为false

componentWillMount() { AsyncStorage.getItem('key').then( (value) => { if(value) { this.setState({ loader: false, logged: true}) } else { this.setState({ loader: false }) } }) } render() { const { loader } = this.state; const routeId = logged ? 2 : 1; if(loader) { return ( <View /> // loading screen ); } return ( <Navigator initialRoute={{id: routeId }} renderScene={this._renderScene} configureScene={ () => { return Navigator.SceneConfigs.PushFromRight; }} /> ); }

React native：有没有办法将初始路由重定向到另一个页面

2 个答案: