React Native 和 React Navigation — 如何让屏幕标题显示在标题和底部选项卡导航器中也显示

Question

我正在自学 React Native 并构建一个相当简单的应用程序，irMobile.

我已经设置了每个屏幕（以关于屏幕为例）

static navigationOptions = () => ({
  title: 'About'
})

在我的应用程序的主要组件中

const MainNavigator = createBottomTabNavigator({ About })
const StackNavigator = createStackNavigator({ MainNavigator })
const AppContainer = createAppContainer(StackNavigator)

然后在组件本身

  render() {
    return (
      <View style={styles.container}>
        <AppContainer />
      </View>
    )
  }

我的屏幕在底部呈现一个漂亮的导航栏，但标题中没有任何标题，只有一个空白区域。

我已经多次浏览文档，想看看我错过了什么，但我很难过。

如果我使用的检查中的iOS模拟器我可以选择的标题，它表明这是一个View在x: 0, y: 44同width: 375和height: 43.7，这样的东西是存在的我就是不能看到它。

我试过设置 aheaderStyle以{ backgroundColor: 'red' }查看我是否至少可以看到它，但没有。

但是，如果我更改StackNavigator将About屏幕放在那里MainNavigator，如下所示：

const StackNavigator = createStackNavigator({ About, MainNavigator })

然后我让我的标题按预期显示，但底部标签栏不再显示。

所以这很混乱。

文档对于如何将标题和底部选项卡导航器同时放入同一个应用程序有点含糊。显然，作为这里的 React Native 菜鸟，我错过了一些非常明显和简单的东西。

我不明白什么以及如何解决这个问题？

github.com/davesag/irMobile 上的源代码。

Answer 1

通过navigationOptions在组件内部进行设置，您可以将其应用于调用该组件的导航元素。

因此，在您的情况下，您定义的标题About适用于底部选项卡，而不是您希望的屏幕。

而不是navigationOptions在组件内部设置为静态属性，您需要在创建堆栈导航时直接定义它。

除此之外，我认为您想将堆栈嵌套在底部选项卡导航中，而不是相反。通过这样做，您可以为每个屏幕使用不同的标题。

下面是一个例子：

const AboutStack = createStackNavigator({ About: { screen: About, navigationOptions: { title: 'About Title' } } });
const CreditStack = createStackNavigator({ Credit: { screen: Credit, navigationOptions: { title: 'Credit Title' } } });

const MainNavigator = createBottomTabNavigator({
  About: { screen: AboutStack, navigationOptions: { title: 'About Label' } },
  Credit: { screen: CreditStack, navigationOptions: { title: 'Credit Label' } },
});

const AppContainer = createAppContainer(MainNavigator);

像这样，标题标题将是“关于标题”和标签标签“关于标签”。