javascript - React Navigation getParams in function component - Stack Overflow

admin管理员组

文章数量:1313106

Summary of Problem

I'm using functional ponents in React Navigation and am using NavigationService.navigate from the NavigationService ponent I created as per their documentation. I need to pass a param to the destination, which I can do but I don't know how to retrieve the param in the destination screen.

I think I just need to add something to my NavigationService.js file but I'm not sure what it should be and I can't find it in their documentation.

Code

Code in starting screen

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

NavigationService.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
};

Summary of Problem

I'm using functional ponents in React Navigation and am using NavigationService.navigate from the NavigationService ponent I created as per their documentation. I need to pass a param to the destination, which I can do but I don't know how to retrieve the param in the destination screen.

I think I just need to add something to my NavigationService.js file but I'm not sure what it should be and I can't find it in their documentation.

Code

Code in starting screen

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

NavigationService.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
};

• javascript
• node.js
• reactjs
• react-native
• react-navigation

Share Improve this question Follow asked Sep 10, 2019 at 21:15 bzlightbzlight 1,16055 gold badges2121 silver badges4747 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 6

you don't need further configurations. you can simply do this if you want to access the props of a screen directly connected to your navigator

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

if its a different screen or ponent pass the navigation prop to relevant ponents and access it

more info: https://reactnavigation/docs/en/params.html

本文标签： javascriptReact Navigation getParams in function componentStack Overflow