0

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

.

我试过两种方法。

1.将导航道具从组件传递到操作。（它工作正常。） 2. 在 redux 操作中使用 useNavigation() 钩子。（它不起作用。（钩子只能在函数组件的主体内部调用））。

这是我的代码

动作.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));
    }
  };
};

此代码不起作用

错误（Hooks 只能在函数组件的主体内部调用）

谁能帮助我如何useNavigation()在 redux 操作中使用？

谢谢

4

2 回答 2

0

根据 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' });
于 2021-08-16T16:53:57.700 回答
0

您将不得不使用 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并调用导航

文档 https://reactnavigation.org/docs/navigating-without-navigation-prop/#handling-initialization

于 2020-08-10T07:47:27.853 回答