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

Question

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

这是我的代码：

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

return()}

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

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

Answer 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`
}

Answer 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)

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