Question

我想在props第5版的一个功能组件中使用{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

如果您的组件未在路线对象中注册为路线，则必须手动通过导航道具，或者可以执行此操作。因为只有注册为路线的组件才能访问导航对象。

使用反应导航中的 withNavigation 对其进行包装，如下所示：

import { withNavigation} from 'react-navigation'; 

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

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

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

如何在React Native的一个功能组件中一起使用道具和导航

2 个答案: