我是否正确使用了NavigationOptions类变量和React Navigation？

Question

我正在使用react-navigation，我有一个嵌套在另一个TabNavigator中的TabNavigator。 当我在ReviewScreen中定义类Variable navigationOptions并在标题中添加了正确的属性时，我最终得到了Invariant Voliation错误。但是，从我阅读的有关反应导航的所有文档中，似乎我的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>
    );
  }
}

提前致谢!!

Answer 1

如最新docs中所述，标题为

  给定 HeaderProps

反应元素或函数会返回反应元素。

由于您的标头是一个返回Object而不是React.Element的函数，因此它会抛出对象不是有效的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)"
            />
        )
    })