如何在Redux操作React Native中使用useNavigation()Hook

Question

我想从我的redux操作中导航用户。例如，当他们点击登录，他们从动作导航

。

我试过两种方法

1.将导航道具从组件传递到动作。(效果很好。(2.在redux操作中使用useNavigation((钩子。(它不起作用。(钩子只能在函数组件的内部调用((。

这是我的代码

action.js

export const registerUser = (data) => {
const navigation = useNavigation()
return async dispatch => {
dispatch(authLoading());
try {
const res = await axios.post(
`${BASE_URL}/mobilesignup`,
data,
{
headers: {
Accept: 'application/json',
'Content-Type': 'application/json',
},
},
);
console.log(res);
dispatch(registerSuccess(res));
navigation.navigate('dashboard')
} catch (err) {
dispatch(authFailed(err));
}
};
};

此代码不起作用

错误(钩子只能在函数体内部调用组件(

有人能帮我如何在redux操作中使用useNavigation()吗？

感谢

Answer 1

您必须使用Navigation ref，它用于从reducer 调用等目的

这个想法是创建一个navigation.js，并设置导航容器的引用并使用它。

代码如下所示。(文件样本(

//App.js
import { NavigationContainer } from '@react-navigation/native';
import { navigationRef } from './RootNavigation';
export default function App() {
return (
<NavigationContainer ref={navigationRef}>{/* ... */}</NavigationContainer>
);
}

// RootNavigation.js
import * as React from 'react';
export const navigationRef = React.createRef();
export function navigate(name, params) {
navigationRef.current?.navigate(name, params);
}

您可以简单地将导航js导入任何位置并调用navigation

文件https://reactnavigation.org/docs/navigating-without-navigation-prop/#handling-初始化

Answer 2

根据react navigation v6.x 的文档

定义你的rootNavigation模块如下：

// RootNavigation.ts
import { createNavigationContainerRef } from "@react-navigation/native";
const navigationRef = createNavigationContainerRef();
export class RootNavigation {
static navigate(name: string, params: any = {}) {
if (navigationRef.isReady()) {
navigationRef.navigate(name, params);
}
}
static get ref():any {
return navigationRef;
}
}

将引用传递到位于应用程序根目录的NavigationContainer。

// App.js
import { NavigationContainer } from '@react-navigation/native';
import { navigationRef } from './RootNavigation';
export default function App() {
return (
<NavigationContainer ref={RootNavigation.ref}>{/* ... */}</NavigationContainer>
);
}

然后简单地在动作创建者上使用它

// any js module
// ...
RootNavigation.navigate('ChatScreen', { userName: 'Lucy' });