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));
    }
  };
};

此代码不起作用

错误（只能在函数体内调用钩子组件）

有人可以帮助我如何在还原动作中使用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-initialization

如何在Redux动作中使用useNavigation（）挂钩React Native

1 个答案: