Question

如何在react-native中正确设置受保护的路由？

当前，我有一个用于检查用户是否存在并且已被认证的类，然后应将其移至特定路线，否则应将其移至着陆路线

class AuthChecker extends PureComponent {
   componentDidMount () {
     firebase.auth().onAuthStateChanged((user) => {
      if (this.props.isAuthenticated && user) {           
        return this.props.navigation.navigate('drawer');  
      } else {
        return this.props.navigation.navigate('Landing'); 
      }
    });
   }
 render() {
    return (
          <View>     
             <Text> Loading...</Text>
          </View>
      );
  }
}
const mapStateToProps = state => {
  return {
    isAuthenticated: state.profile.isAuthenticated,
    signup_process_intial: state.profile.signup_process_intial
  }
};
const AuthCheckerRoute = connect(mapStateToProps)(AuthChecker)


const allRoutes = createSwitchNavigator(
  {
    authChecker: {
      screen: AuthCheckerRoute
    },
    Auth: {
      screen: loginNavigation
    },
    drawer: {
        screen: drawerNavigation
    },
    onboarding: {
        screen: onboardingNavigation
    }
  },
  {
    initialRouteName: "authChecker"
  }
);

const Navigator = createAppContainer(allRoutes);

现在，问题出在每当我的状态发生变化时，例如在注册屏幕中，我都有单击该按钮会触发redux动作的按钮。

它触发我的应用再次从（通过Auth Checker componentDidMount）进入

return this.props.navigation.navigate('Landing');

因此使我的应用从原始登陆屏幕开始。

在注册屏幕课程中，我在渲染器中包含以下代码

render() {
   if (this.props.signup_process_intial) {
      this.props.navigation.navigate('YourPhoneNumber')
    }

应该将其带到YourPhoneNumber屏幕上，如何设置路线以将其带到

this.props.navigation.navigate('YourPhoneNumber')

屏幕，而不是

return this.props.navigation.navigate('Landing');

在典型的nodejs-express中，如果它通过了支票，我们将有一个类似于next（）的东西可以继续移动

正确设置反应本机中的保护

0 个答案: