时间戳

首页 > 解决方案 > 堆栈中嵌套抽屉时不显示屏幕标题

reactjs - 堆栈中嵌套抽屉时不显示屏幕标题

问题描述

在这里尝试完成的是拥有一个 TopStackNavigator并将其嵌套在DrawerNavigator其中，方法是执行以下操作：

export default createStackNavigator({
  initial: createDrawerNavigator({
    Home: {
      screen: Home,
      navigationOptions: {
        title: 'Home',
      },
    },
    Nutrition: {
      screen: Nutrition,
      navigationOptions: {
        title: 'Nutrition',
      },
    },
  }, {
    navigationOptions: {
      header: null,
    },
  }),
});

但我看到的只是一个空的白色标题，没有显示任何内容

标题的样子

关于我可能做错了什么的任何建议？

标签： reactjsreact-nativereact-navigation

解决方案

参考材料主题文档：

横向导航是指在同一层次的屏幕之间移动

仍然参考这个文档， StackNavigator 允许导航：

在连续层级的屏幕之间

所以我认为你不应该在堆栈导航器中使用抽屉导航器。

实现一个包含多个堆栈导航器的抽屉导航器更为标准，如下所示：

export default createDrawerNavigator({
    Stack1: {
      screen: stack1,
    },
    Stack2: {
      screen: stack2,
    },
});

这样，您可以在堆栈导航器的定义中设置每个页面的标题，并且效果很好。

我创建了一个工作示例：https ://snack.expo.io/SyfeqM6ZX

推荐阅读