react native 如何在一个功能组件中同时使用道具和导航答案

【问题标题】：How to use props and navigation together in one functional component in react nativereact native 如何在一个功能组件中同时使用道具和导航
【发布时间】：2020-05-23 02:51:04
【问题描述】：

我想在react-navigation第5版的一个功能组件中使用props和{navigation}

这是我的代码：

const Header =(props, {navigation})=>{

return()}

但它不起作用，我无法激活抽屉。它返回以下错误：

undefined is not an object(evaluating 'navigation.openDrawer)

【问题讨论】：

标签： javascript reactjs react-native react-navigation react-functional-component

【解决方案1】：

你需要查找解构：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment

例子：

const Header = (props)=> {
  const { navigation } = props;

  // Now you can use `navigation`
  // Instead of destructuring, you can also use `props.navigation`
}

【讨论】：

谢谢，但我仍然遇到上述错误，我创建了一个带有道具的标题并将其导入登录屏幕（我在所有具有不同道具的屏幕中使用此标题）我正在尝试制作可点击的图标这个标题和打开抽屉，但它的 onpress 功能在标题组件中不起作用，但它在父组件中起作用（我的意思是登录屏幕）你知道我该如何解决这个问题吗？
您的标题（或堆栈导航器）是否在抽屉导航器中？
是的，请看一下这些截图，第一个是抽屉配置，第二个是 index.js 文件imgur.com/a/hZ86LXk i.imgur.com/aUTKDRm.jpg
您的标题是抽屉里的屏幕？这似乎不对
我现在按照您所说的将它从抽屉中删除了，但问题仍然存在，这很奇怪，因为 navigation.openDrawer(); 在父组件（登录屏幕）中工作，但在子组件（标题）中不起作用.你有什么想法吗？

【解决方案2】：

如果您的组件未在 routes 对象中注册为路由，则您必须手动传递导航道具，或者您可以这样做。因为只有注册为路由的组件才能访问导航对象。

用 react-navigation 中的 withNavigation 包装它，如下所示：

import { withNavigation} from 'react-navigation'; 

const YourFunctionalComponent = props => { 
   // your component logic
};

// the navigation now will be in props
export default withNavigation(YourFunctionalComponent)

这适用于树深处的任何自定义组件。

【讨论】：