Как использовать реквизит и навигацию вместе в одном функциональном компоненте в реагировать

Question

Я хочу использовать props и {navigation} в одном функциональном компоненте в react-navigation версии 5

Это мой код:

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

return()}

Но это не работает Я не могу активировать ящик. Возвращает следующую ошибку:

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

Answer 1

Если ваш компонент не зарегистрирован как маршрут в объекте маршрутов, вы должны либо пропустить навигационную опору вручную, либо вы можете сделать это. Потому что только компоненты, зарегистрированные как маршруты, будут иметь доступ к объекту навигации.

Оберните его с помощью withNavigation из реагировать-навигации , например:

import { withNavigation} from 'react-navigation'; 

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

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

Это работает с любым пользовательским компонентом в глубине дерева.

Answer 2

Вам нужно искать деструктуризацию: 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`
}