我是否在 React Navigation 中以正确的方式使用 navigationOptions 类变量？答案

【问题标题】：Am I using navigationOptions class variable the right way with React Navigation?我是否在 React Navigation 中以正确的方式使用 navigationOptions 类变量？
【发布时间】：2018-04-18 01:00:08
【问题描述】：

我正在使用 react-navigation，并且我有一个 TabNavigator 嵌套在另一个 TabNavigator 中。当我在 ReviewScreen 中定义类变量 navigationOptions 并在标题中添加正确的属性时，我最终得到了 Invariant Voliation 错误。但是，从我读过的所有关于 react-navigation 的文档来看，我的 navigationOptions 似乎是以适当的方式完成的。

下面是我的 App.js

export default class App extends React.Component {
  render() {
    const MainNavigator = TabNavigator({
      welcome: { screen: WelcomeScreen },
      auth: { screen: AuthScreen },
      main: {
        screen: TabNavigator({
          map: { screen: MapScreen },
          deck: { screen: DeckScreen },
          review: { screen: StackNavigator({
            review: { screen: ReviewScreen },
            Settings: { screen: SettingsScreen }
          })}
        })
      }
    });
    return (
      <View style={styles.container}>
        <MainNavigator />
      </View>
    );
   }
}

这是我的 ReviewScreen 组件，其中包含 navigationOptions 类变量。

 class ReviewScreen extends Component {
  static navigationOptions = {
   title: 'Review Jobs',
   header: ({ navigate }) => {
     return {
       right: (
         <Button
           title="Settings"
           onPress={() => navigate('settings')}
           backgroundColor="rgba(0,0,0,0)"
           color="rgba(0, 122, 255, 1)"
         />
       )
     };
   }
 }

  render() {
    return (
      <View>
        <Text> ReviewScreen </Text>
        <Text> ReviewScreen </Text>
        <Text> ReviewScreen </Text>
        <Text> ReviewScreen </Text>
        <Text> ReviewScreen </Text>
      </View>
    );
  }
}

提前致谢！！

【问题讨论】：

标签： react-native react-navigation

【解决方案1】：

最新docs中提到，header是

React Element 或给定 HeaderProps 的函数返回 React Element。

由于您的标头是一个返回 Object 而不是 React.Element 的函数，因此它会抛出 Objects are not a valid React.Child 错误。

或者，您可以做的是将您的 headerRight 移动到父 navigationOptions 作为

static navigationOptions = ({navigation}) => ({
        title: 'Review Jobs',
        headerRight: (
            <Button
                title="Settings"
                onPress={() => navigation.navigate('settings')}
                backgroundColor="rgba(0,0,0,0)"
                color="rgba(0, 122, 255, 1)"
            />
        )
    })

【讨论】：