Question

大家好需要帮助登录流程，我为auth流程编写代码，但面临一些奇怪的问题，比如。现在发生了什么我点击登录按钮时有登录页面，我发送用户到auth屏幕但是如果用户点击后退按钮然后他再次移动到登录屏幕，这是错误的，如果用户登录那么为什么它＆＃39;再次移动到登录屏幕。

这是代码，这是我的route.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。如，

从react-navigation导入NavigationActions。并在用户签名后使用以下代码发送新路线。

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

有关详细信息，请阅读此Reset Navigation Action。

如何实现auth flow in react native with react navigation？

1 个答案: