对象作为 React 子级无效（React Navigation）答案

【问题标题】：Objects are not valid as a React child (React Navigation)对象作为 React 子级无效（React Navigation）
【发布时间】：2017-12-18 08:27:18
【问题描述】：

我正在使用React Navigation，我想在StackNavigator 中添加右键。添加右键后，我得到这样的错误：

对象作为 React 子对象无效（找到：带有键 {right} 的对象）。如果您打算渲染一组子项，请改用数组

如何解决这个错误？

代码如下：

import React, {Component} from 'react';
import {View, Text} from 'react-native';

class ReviewScreen extends Component {

  static navigationOptions = {
      title: 'Review Jobs',
      header: () => {
          return {
              right: <Text>Go right</Text> 
          };
      }
  }

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


        );
    }
}

export default ReviewScreen;

【问题讨论】：

标签： javascript react-native react-navigation

【解决方案1】：

不要使用header。 header 需要一个 React 组件来代表整个标头，而不是一个普通的对象。使用headerRight：

static navigationOptions = {
  title: 'Review Jobs',
  headerRight: <Text>Go right</Text>
}

【讨论】：

【解决方案2】：

您不能在标题选项中呈现对象。您正在返回一个对象而不是文本标签。只需如下更改您的代码即可使其正常工作：-

      headerRight:<Text>Go right</Text>

而不是：-

      header: () => {
      return {
          right: <Text>Go right</Text> 
      };
  }

【讨论】：

【解决方案3】：

您可以使用headerRight 属性将标题的右键设置为自定义。

示例

static navigationOptions = {
  title: 'Review Jobs',
  headerRight:<Text>Go right</Text>
}

【讨论】：