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

Question

我是 react native 的新手，目前正在开发一个需要登录的 react-native 应用程序。登录成功后，视图变为主页。 问题是在我关闭并重新打开应用程序后，它再次显示 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

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

编辑： loader的初始状态应该是true，logged应该是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; }} />
    );
 }

Answer 2

用你的渲染函数替换并尝试一下。

  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; }} />
    );
 }