NavigationsActions.Navigate无法正常工作

时间:2020-08-28 13:32:46

标签: react-native

执行导航操作时,我需要导航至路线。 我阅读了文档,但没有解决问题。 我正在使用Redux-saga和React-Navigation v5。

import {put, call, select} from 'redux-saga/effects';
import {apiGet, apiGetProdutoByID} from '../../services/overAll/apiProdutos';
import {TypesProdutos} from './../ducks/produtos';
import {NavigationActions} from 'react-navigation';

export function* searchByID(action) {
  try {
    const response = yield call(apiGetProdutoByID, action.idProduto);

    yield put({
      type: TypesProdutos.SEARCH_BY_ID,
      produto: response.data.data.obj,
    });

    const produto = yield select(state => state.produtos.dataByID);
    console.log(produto);

    **yield put(
      NavigationActions.navigate({
        routeName: action.route,
        params: {produto: produto},
      }),
    );**
  } catch (error) {
    console.log(error);
    yield put({type: TypesProdutos.FAIL});
  }
}

1 个答案:

答案 0 :(得分:1)

仔细阅读反应导航的文档,我发现有关NavigationRef,它提供了该应用程序任何文件的导航。因此,我使用以下代码创建文件RootNavigation:

// RootNavigation.js

import * as React from 'react';

export const navigationRef = React.createRef();

export function navigate(name, params) {
  navigationRef.current?.navigate(name, params);
}

并在NavigationContainer组件上:

import {navigationRef} from './routes/RootNavigation';

...

<NavigationContainer ref={navigationRef}>
...
<NavigationContainer />

以及redux-saga的动作文件中:

export function* searchByID(action) {
  try {
    ...

    **RootNavigation.navigate(action.route, {produto: produto});**
  } catch (error) {
    console.log(error);
    yield put({type: TypesProdutos.FAIL});
  }
}

正在工作!