React Navigation嵌套TabNavigator时，navigationOptions类变量用法是否正确？

嘿，我之前在嵌套TabNavigator的时候也踩过一模一样的坑！你提到在ReviewScreen里定义了类变量navigationOptions后报错，十有八九是因为navigationOptions需要定义为类的静态属性，而不是普通实例变量。

React Navigation会在组件实例化之前就去读取navigationOptions的配置，如果你把它写成类里的普通变量（比如直接在类中赋值或者在constructor里定义），React Navigation根本找不到正确的配置项，自然就会抛出Invariant Violation错误。

错误写法示例（你的问题根源） #

class ReviewScreen extends React.Component {
  // 错误：这是实例变量，React Navigation无法提前读取
  navigationOptions = {
    header: {
      right: () => <Button title="Add" />
    }
  }

  render() {
    // ...你的屏幕内容
  }
}

正确写法：将navigationOptions定义为静态属性 #

class ReviewScreen extends React.Component {
  // 正确：静态属性，React Navigation能正常识别读取
  static navigationOptions = {
    header: {
      right: () => <Button title="Add" />
    }
  }

  render() {
    return (
      // 你的屏幕内容
    );
  }
}

额外注意：嵌套TabNavigator的Header配置细节 #

如果外层TabNavigator已经设置了全局header，内层TabNavigator的屏幕可能会继承外层的配置。如果需要给内层屏幕单独定制header，还可以通过navigation参数动态配置（比如需要跳转功能时）：

static navigationOptions = ({ navigation }) => ({
  headerTitle: '我的评论',
  headerRight: () => (
    <Button
      title="新增"
      onPress={() => navigation.navigate('AddReview')}
    />
  )
});

这样既可以拿到navigation对象实现页面跳转，也能确保配置被React Navigation正确识别。

内容的提问来源于stack exchange，提问作者codigomonstruo