标题不适用于 react-navigation createStackNavigator

Question

我在我的应用程序中使用来自 react-navigation 的 createBottomTabNavigator 内的 createStackNavigator。我想在我的屏幕上有一个标题。按照 React Navigation's tutorial 我是这样实现的：

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

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

我做错了什么？

Answer 1

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

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

Answer 2

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

对象

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

函数表示return一个对象

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

你的代码不起作用是因为你的箭头函数有错误，你应该在主体周围添加一个括号，以便它 returning 对象。

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