Question

我对React Native，React Navigation和HOC相当陌生。我正在尝试将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')

很显然，“ this”没有绑定在我的包装组件中。我只是不确定如何绑定它，或者我是否正在解决这个错误，而我还缺少另一种方法。有想法吗？

Answer 1

Li357的评论已解决。我只是按照the docs重写了navigationOptions作为一个函数：

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

Voila，问题已解决。谢谢，李357！

在HOC中包装时（绑定到此）访问反应导航道具吗？

1 个答案: