从动作导航到本机反应答案

【问题标题】：Navigation from action react native从动作导航到本机反应
【发布时间】：2021-09-10 10:44:00
【问题描述】：

我的文件结构是这样的

 - actions directory
    - user.js
 - navigation directory
    - tabNavigator.js

 - screens directory
    - Home.js
    - Login.js
    - Account.js

在 actions 目录中的 user.js 中，我有一个功能可以使身份验证过程成为可能，因为我在 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

我尝试过类似的方法：

我导入了一个 react 原生模块

    import { NavigationActions } from 'react-navigation';

然后在下面的条件下我输入以下代码：

   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）在此页面上找到示例后，我尝试了另一种方法： exemple code

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

在互联网上放另一个例子我尝试这样的事情：another exemple

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

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

【问题讨论】：

标签： javascript react-native redux react-redux

【解决方案1】：

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

<Stack.Navigator
         
        >
          
          {authToken === '' ? (
            <Stack.Screen
              name="Auth"
              component={AuthStack}
           
            />
          ) : (
            <Stack.Screen
              name="Main"
              component={MainNavigator}
              
            />
          )}
        </Stack.Navigator>

其中 AuthStack 是包含登录屏幕/注册屏幕等的堆栈，而 MainNavigator 包含您希望在用户登录后显示的所有屏幕。您的 authToken 可以来自您的商店管理系统或异步存储。根据条件，react-navigation 将自动为您处理导航，因此您不必在 authtoken 具有值后手动导航。参考：https://reactnavigation.org/docs/auth-flow/

【讨论】：