javascript - 功能组件中的 React Navigation getParams

Question

问题总结

我在 React Navigation 中使用功能组件，并使用我根据他们的 documentation 创建的 NavigationService 组件中的 NavigationService.navigate .我需要将参数传递到目标，我可以这样做，但我不知道如何在目标屏幕中检索参数。

我想我只需要在我的 NavigationService.js 文件中添加一些东西，但我不确定它应该是什么，而且我在他们的文档中找不到它。

代码

开始画面中的代码

import NavigationService from "~/app/services/NavigationService";
onPress={() => NavigationService.navigate("CompScreen", { comp })}

导航服务.js

import {
  NavigationActions,
  DrawerActions,
  StackActions
} from "react-navigation";

let navigator;

/**
 * @function setTopLevelNavigator
 * @param  {ref} navigatorRef
 */
function setTopLevelNavigator(navigatorRef) {
  navigator = navigatorRef;
}

/**
 * @function navigate
 * @param  {string} routeName
 * @param  {any} params
 */
function navigate(routeName, params) {
  navigator.dispatch(
    NavigationActions.navigate({
      routeName,
      params
    })
  );
}

/**
 * @function goBack
 * @param {}
 */
function goBack() {
  navigator.dispatch(NavigationActions.back());
}

/**
 *
 * @function navigateAndReset
 * @param routeName
 * @param params
 */

//this is to reset the navigation stack.
function navigateAndReset(routeName, params) {
  navigator.dispatch(
    StackActions.reset({
      index: 0,
      key: null,
      actions: [
        NavigationActions.navigate({
          routeName,
          params
        })
      ]
    })
  );
}

/**
 * @function openDrawer
 */
function openDrawer() {
  navigator.dispatch(DrawerActions.openDrawer());
}
/**
 * @function closeDrawer
 */
function closeDrawer() {
  navigator.dispatch(DrawerActions.closeDrawer());
}
/**
 * @function toggleDrawer
 */
function toggleDrawer() {
  navigator.dispatch(DrawerActions.toggleDrawer());
}

export default {
  navigate,
  openDrawer,
  closeDrawer,
  toggleDrawer,
  goBack,
  navigateAndReset,
  setTopLevelNavigator
};

Answer 1

您不需要进一步的配置。如果您想访问直接连接到您的导航器

的屏幕 Prop ，您可以简单地执行此操作

 const { navigation } = this.props;
 const itemId = navigation.getParam('comp', {});

如果它是不同的屏幕或组件，则将 navigation 属性传递给相关组件并访问它

更多信息:https://reactnavigation.org/docs/en/params.html