来自action react native的导航

Question

我的文件结构是这样的

- actions directory
- user.js
- navigation directory
- tabNavigator.js
- screens directory
- Home.js
- Login.js
- Account.js

在<<p> strong> user.js 在actions目录我有一个功能，使身份验证过程成为可能，因为我在Login.js如果身份验证可用，我想导航到Account.js

代码如下:

user.js

export const loginIntoAccount = ()=>{
return async (dispatch,getState) =>{
try{
const {email, password} = getState().user;
//Login Api
const data = new FormData();
data.append('email', email);
data.append('password', password);
let configUserLogin = {
method:'post',
url:apiConfig.logInUser,
headers: { 
credentials: true,
exposedHeaders: ["set-cookie"],
'Cookie': ['set-cookie'], 
},
data : data
}

axios(configUserLogin).then((response) =>{

if(response.status == 200){
dispatch({type:"GET_USER_LOGGED_DATA",payload:response.data})
}else{
alert('Adresa de email sau parola gresite!')
}
})
.catch((error)=>{
//  alert('ss' + error);
}).finally(function () {
console.log('Finally called');

});  
}catch(e){
console.log(e)
}
}
}

如果一切正常，代码工作，我从数据库获取用户数据。但问题是如果身份验证没问题我想导航到account。js

我试过这样做:

1. 我导入了一个react native模块

   import { NavigationActions } from 'react-navigation';
   

2. 然后在下面的条件中输入以下代码:

   if( response.status == 200){
   dispatch({type:"GET_USER_LOGGED_DATA",payload:response.data})
   
   const navigateAction = NavigationActions.navigate({
   routeName: "Account",
   params: {},
   action: NavigationActions.navigate({ routeName: "Account" })
   });
   this.props.navigation.dispatch(navigateAction);
   }else{
   alert('Adresa de email sau parola gresite!')
   }
   

但是行不通

3)我尝试另一种方式后，一个例子发现在这一页:例代码

return async (dispatch,getState,navigation) =>{
.......
if(status == 200)
navigation.navigate('Account)
}

4. 允许另一个例子在互联网上我尝试这样做:另一个例子

return async (dispatch,getState) =>{
.......
if(status == 200)
dispatch(NavigationActions.navigate({ routeName: 'Account' });
}

我想要得到的是当我登录时，一切都很好，从我的帐户重定向到屏幕。

Answer 1

在应用程序的根目录创建一个堆栈导航器，如

<Stack.Navigator

>

{authToken === '' ? (
<Stack.Screen
name="Auth"
component={AuthStack}

/>
) : (
<Stack.Screen
name="Main"
component={MainNavigator}

/>
)}
</Stack.Navigator>

其中AuthStack是包含登录屏幕/注册屏幕等的堆栈，MainNavigator包含用户登录后想要显示的所有屏幕。您的authToken可以来自您的存储管理系统或asyncstorage。根据条件，react-navigation将自动为您处理导航，这样您就不必在authtoken具有值后手动导航。参见:https://reactnavigation.org/docs/auth-flow/