Доступ к опорам реагирующей навигации при переносе в HOC (связывание этого)?

Question

Я довольно новичок в React Native, React Navigation и HOCs.Я пытаюсь использовать react-native-responsive-ui HOC вместе с react-navigation.Для обычных компонентов я могу сделать что-то вроде этого:

export default class SettingsScreen extends React.Component {
  static navigationOptions = {
    title: 'Settings',
    headerRight: <Button onPress={() => props.navigation.navigate('SettingsScreen')} title="Btn" />
  }
  ...
}

Однако я обнаружил, что, если я обертываю свой компонент с responsive HOC, определение navigationOptions в моем компоненте не имеет никакого эффекта,Вместо этого я должен определить их в обернутом компоненте:

class HomeScreen extends React.Component { ... }

const ResponsiveHomeScreen = responsive(HomeScreen)
ResponsiveHomeScreen.navigationOptions = {
  title: 'Home',
  headerRight: <Button onPress={() => this.props.navigation.navigate('SettingsScreen')} title="Btn" />
}
export default ResponsiveHomeScreen

При этом все отображается правильно, но нажатие кнопки приводит к сбою:

undefined is not an object (evaluating '_this3.props.navigation')

Ясно, что «это» не связано вмой завернутый компонент.Я просто не уверен, как связать это, или если я подхожу к этому неправильно, и есть другой способ, который я пропускаю.Мысли? * * 1013

Answer 1

Комментарий Li357 имеет решение. Я просто переписал navigationOptions как функцию, согласно документам :

const ResponsiveHomeScreen = responsive(HomeScreen)
ResponsiveHomeScreen.navigationOptions = ({navigation}) => {
  return {
    title: 'FlashNote',
    headerRight: <Button onPress={() => navigation.navigate('SettingsScreen')} title="Btn" />
  }
}

Вуаля, проблема решена. Спасибо, Li357!