react-native - 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 模拟器中使用检查器，我可以选择标题，它显示它是Viewat x: 0, y: 44with width: 375and height: 43.7，所以我看不到它。

我尝试设置 aheaderStyle以{ backgroundColor: 'red' }查看是否至少可以看到，但不能。

但是，如果我更改StackNavigator为将About屏幕连同MainNavigator以下内容一起放入其中：

const StackNavigator = createStackNavigator({ About, MainNavigator })

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

所以这很令人困惑。

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

我有什么不明白的，我该如何解决这个问题？

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

标签： react-nativereact-navigation

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);

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