如何使用反应导航在 react native 中实现身份验证流

Question

嗨，伙计们需要登录流程方面的帮助，我为身份验证流编写了代码，但面临一些奇怪的问题。现在发生了什么，我在单击登录按钮时有登录页面，我将用户发送到身份验证屏幕，但如果用户单击后退按钮，那么他会再次移动到登录屏幕，这是错误的，如果用户是登录，那么为什么它再次移动到登录屏幕。

这是我的路线的代码.js

import React from 'react';
import { StackNavigator, DrawerNavigator } from 'react-navigation'
import loginScreen from '../containers/login/loginScreen'
import todo from '../containers/todo/todo'
import addTodo from '../components/addTodoTask'
import SideBar from '../components/sideBar/sideBar'
import DashBoard from '../components/common/dashboardWidget'
import signUp from '../containers/signUp'
import editTodo from '../containers/todo/editTodo'
const authScreen = DrawerNavigator({
    DashBoard: { screen : DashBoard },
    Todo: { screen: todo }
},{
    drawerPosition: 'left',
    contentComponent: props => <SideBar {...props} />
},);
export const SignedOut = StackNavigator({
    LoginScreen : {
        screen : loginScreen,
        navigationOptions : {
            mode: "card",
            title: "Sign in",
            headerMode: "Screen",
            header : null
        }
    },
    signUp : { screen : signUp }
},{
    headerMode: 'none'
},);
export const SignedIn = StackNavigator({
    rootnavigator : { screen : authScreen },
    addTodo : { screen : addTodo },
    editTodo: { screen : editTodo }
},{
    headerMode: 'none'
},);
export const createRootNavigator = (signedIn = false) => {
  return StackNavigator(
    {
      SignedIn: {
        screen: SignedIn,
        navigationOptions: {
          gesturesEnabled: false
        }
      },
      SignedOut: {
        screen: SignedOut,
        navigationOptions: {
          gesturesEnabled: false
        }
      }
    },
    {
      headerMode: "none",
      mode: "modal",
      initialRouteName: signedIn ? "SignedIn" : "SignedOut"
    }
  );
};

这是登录按钮代码

signIn() {
axios.post(BACKEND_URL+'/api/User/login', {
  userName: this.state.userName,
  password: this.state.password
})
.then( (response) => {
  if(response.data.message == 'Success'){
    // Set up root Auth Token and Headers
    axios.defaults.headers.common['Authorization'] = "bearer "+response.data.data.accessToken;
    axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
    AsyncStorage.setItem('@userData:', JSON.stringify(response.data.data));
    onSignIn().then(() => { this.props.navigation.navigate('SignedIn') });
    this.setState({ isLoading: false });
  }
})
.catch( (error) => {
  alert("Please check your crendentials")
});

}

Answer 1

而不是

navigation.navigate尝试navigation.dispatch将路由重置为SignedIn StackNavigator。如

从反应导航导入NavigationActions。 并使用以下代码在用户登录后调度新路由。

onSignIn().then(() => { this.props.navigation.dispatch(
    NavigationActions.reset({
        index: 0,
        key: null,
        actions: [
            NavigationActions.navigate({ routeName: 'SignedIn' })
        ]
   })
)});

有关详细信息，请阅读此重置导航操作。