0

redux アクションからユーザーをナビゲートしたい。たとえば、ログインをクリックすると、アクションから移動します

.

私が試した2つの方法。

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()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 に答える