标题不适用于 react-navigation createStackNavigator答案

【问题标题】：Title not working on react-navigation createStackNavigator标题不适用于 react-navigation createStackNavigator
【发布时间】：2019-09-16 00:35:56
【问题描述】：

我在我的应用程序中使用来自react-navigation 的createBottomTabNavigator 内的createStackNavigator。我想在我的屏幕上有一个标题。在 React Navigation's tutorial 之后，我以这种方式实现了它：

createBottomTabNavigator(
    {
      Home: createStackNavigator(
       {screen: HomePage, navigationOptions: () => { title: 'Home'}}),
      ...
    },

但是，导航栏中没有显示任何内容。我也尝试过headerTitle，但无济于事。

我做错了什么？

【问题讨论】：

标签： react-native react-navigation react-navigation-stack

【解决方案1】：

设置navigationOptions有两种方式，对象或函数

对象

{
    screen: HomePage,
    navigationOptions: { title: 'Home' }
}

返回对象的函数

{
    screen: HomePage,
    navigationOptions: ({ navigation }) => {
       return { title: 'Home' }
    }
}

您的代码不起作用是由于您的箭头函数有错误，您应该在主体周围添加一个括号，以便它返回对象。

{ screen: HomePage, navigationOptions: () => ({ title: 'Home'}) }

【讨论】：

这是正确答案。另一种方法是{ screen: HomePage, navigationOptions: () => {return { title: 'Home'}} }
当我传递一个普通对象createStackNavigator({screen: HomePage, navigationOptions: { title: 'Home'} }) 时，我收到一个错误：路由'navigationOptions' 的组件必须是一个React 组件。例如：从 './MyScreen' 导入 MyScreen； ... navigationOptions: MyScreen, } 你也可以使用导航器： import MyNavigator from './MyNavigator'; ...导航选项：我的导航器，}
你的路由定义错误，createStackNavigator应该是一个带key的对象，例如createStackNavigator({ Home: { screen: HomePage, navigationOptions: { .... }}})请参考reactnavigation.org/docs/en/stack-navigator.html
你是对的。当我把它变成一个键值对而不是对象时，它就起作用了。

【解决方案2】：

navigationOptions 不应该是一个函数，而是一个 JSON。所以，删除箭头并这样做：

createBottomTabNavigator(
{
  Home: createStackNavigator(
   {screen: HomePage, navigationOptions: { title: 'Home'},
  ...
},

【讨论】：

reactnavigation.org/docs/en/stack-navigator.html 清楚地将示例显示为函数。不过，我还是试了一下，报错：The component for route 'navigationOptions' must be a React component.