react-native v6 中 NavigationActions 的替代方案答案

【问题标题】：Alternative for NavigationActions in react-native v6react-native v6 中 NavigationActions 的替代方案
【发布时间】：2021-12-28 20:41:29
【问题描述】：

我有问题，即这段代码中的导航不起作用：

import AsyncStorage from "@react-native-async-storage/async-storage";
import createDataContext from "./createDataContext";
import trackerApi from "../api/tracker";
import { navigate } from "./navigationRef";

const authReducer = (state, action) => {
  switch (action.type) {
    case "add_error":
      return { ...state, errorMessage: action.payload };
    case "signin":
      return { errorMessage: "", token: action.payload };
    case "clear_error_message":
      return { ...state, errorMessage: "" };
    case "signout":
      return { token: null, errorMessage: "" };
    default:
      return state;
  }
};
const signup = (dispatch) => async ({ email, username, birth, gender, password }) => {
      try {
        const response = await trackerApi.post("/signup", { email, username, birth, gender, password });
        await AsyncStorage.setItem("token", response.data.token);
        dispatch({ type: "signin", payload: response.data.token });
        console.log(response.data.token);
        navigate("DrawerScreen");

      } catch (err) {
        dispatch({
          type: "add_error",
          payload: "Something went wrong with sign up",
        });
      }
    };
export const { Provider, Context } = createDataContext(
  authReducer,
  { signin, signout, signup, clearErrorMessage, tryLocalSignin },
  { token: null, errorMessage: "" }
);

"signup" 函数成功将我的数据发送到 mongodb 中的数据库。但在这之后创建下一个文件是为了帮助我的导航工作。但是在 ReactNative v4 中使用了“NavigationActions”。我需要更改我的代码以使用 RN v6。以下代码粘贴在下面：

    import { NavigationActions } from 'react-navigation';
    
    let navigator;
    
    export const setNavigator = nav => {
      navigator = nav;
    };
    
    export const navigate = (routeName, params) => {
      navigator.dispatch(
        NavigationActions.navigate({
          routeName,
          params
        })
      );
    };

两个文件相互引用。

总结一下，我尝试了使用navigation.navigate("MyScreen") 的解决方案，但它在注册功能中不起作用。问题是如何更改第二个文件以使用 RN6 或如何在没有第二个文件的情况下在此功能中成功导航？

【问题讨论】：

标签： react-native navigation react-native-navigation react-navigation-v6

【解决方案1】：

首先你必须导入 useNavigation

像这样：

import { useNavigation } from "@react-navigation/core";

然后你必须使用它并将它保存在一个变量中，如：

const navigation = useNavigation();

现在在按下该按钮进行导航时使用 onPress：

onPress={() => navigation.navigate('MyScreen')};

这将导航到另一个屏幕。

确保使用 npm 或 yarn 安装项目中使用的每个库。

【讨论】：

【解决方案2】：

您可以通过 ref 访问根导航对象并将其传递给我们稍后将用于导航的 RootNavigation。

// App.js

import { NavigationContainer } from '@react-navigation/native';
import { navigationRef } from './RootNavigation';

export default function App() {
 return (
<NavigationContainer ref={navigationRef}>{/* ... */} 
</NavigationContainer>
);
}

在下一步中，我们定义 RootNavigation，这是一个简单的模块，具有调度用户定义的导航操作的功能。

// RootNavigation.js

import {createNavigationContainerRef} from '@react-navigation/native';
import {StackActions} from '@react-navigation/native';

export const navigationRef = createNavigationContainerRef();

// for navigate

export function navigate(name, params) {
if (navigationRef.isReady()) {
  navigationRef.navigate(name, params);
}
}

// for replace 
export function navigateReplace(name, param) {
if (navigationRef.isReady()) {
  navigationRef.dispatch(
    StackActions.replace(name, {
      param,
    }),
  );
}
}

// 任何 js 模块从 './path/to/RootNavigation.js' 导入 * 作为 RootNavigation；

那么你就可以这样导航了

RootNavigation.navigateReplace('ChatScreen', { userName: 'Lucy' });

或

RootNavigation.navigate('ChatScreen', { userName: 'Lucy' });

有关更多详细信息，您可以阅读文档 Navigating without the navigation prop

【讨论】：