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

我的屏幕渲染时在底部具有一个不错的导航栏，但标题中没有任何标题，只是一个空白。

我已经经历过the docs几次，以查看自己错过了什么，我很沮丧。

如果我在iOS模拟器中使用检查器，则可以选择标头，并且标头显示为View和x: 0, y: 44和width: 375的{​​{1}}，因此东西在那里，我只是看不到。

我尝试将height: 43.7设置为headerStyle，以查看是否至少可以看到，但是没有。

但是，如果我更改{ backgroundColor: 'red' }以将StackNavigator屏幕和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);

例如，标题标题为“关于标题”，标签标签为“关于标签”。

Answer 2

好的，我已经解决了。

诀窍是使用getActiveChildNavigationOptions。

所以现在我的代码看起来像

const navBar = useStorybook({ Balances, Settings, About })
const MainNavigator = createBottomTabNavigator(navBar, {
  navigationOptions: ({ navigation, screenProps }) =>
    getActiveChildNavigationOptions(navigation, screenProps)
})
const StackNavigator = createStackNavigator({ MainNavigator })
const AppContainer = createAppContainer(StackNavigator)

正如@Remeus所指出的，我实际屏幕组件中的标题仅进入MainNavigator，而StackNavigator无法访问。

但是，与其反转我的堆栈并为每个选项卡创建一个StackNavigator，在我看来，利用getActiveChildNavigationOptions来抓取屏幕组件的title（及其他）{{1} }。

这很好用。