0

我在混合不同的导航器时遇到了一些麻烦。这是我的导航器文件：

const DrawerNav = DrawerNavigator({
    Screen1: { screen: Screen1 },
    Screen2: { screen: Screen2 },
})

const TabNav = TabNavigator({
    Drawers: { screen: DrawerNav },
    Params: { screen: Params },
    Search: { screen: Search },
},
{
    tabBarPosition: 'bottom',
});

export default StackNavigator({
    Home: { screen: TabNav },
}, stackNavigatorConfig);

问题是当我打开抽屉导航器时：

  • 第一个选项卡从“Drawers”容器（在 Screen1 中设置）中丢失了 tabBarIcon 和 tabBarLabel 配置。图标消失，标签变为“Drawers”（TabNavigator 声明中的 Name）而不是原来的 tabBarLabel 中设置的值
  • Stack Navigator 的 Header 在 Drawer 上方仍然可见，并且失去了我在 Screen1 navigationOptions 中设置的样式。（对于这个，我最终可以删除 Stack Navigator 并创建自己的标题，使用 Stack Navigator 更快）

这是两个不同状态的图像（抽屉关闭/打开）：

抽屉关闭

抽屉打开

4

1 回答 1

0

我不太明白你为什么在标签内使用抽屉。

为了能够浏览所有应用程序，抽屉必须包含在堆栈中：

const TabNav = TabNavigator({
        Params: { screen: Params },
        Search: { screen: Search },
    },
    {
        tabBarPosition: 'bottom',
    }
);

const DrawerNav = DrawerNavigator({
    Screen1: { screen: Screen1 },
    Screen2: { screen: Screen2 },
    TabNav: { screen: TabNav },
})

export default StackNavigator({
    Home: { screen: TabNav },
    DrawerNav: { screen: DrawerNav }
}, stackNavigatorConfig);

另一方面，如果您要寻找的是通过单击该选项卡来触发抽屉，则您需要从源代码中破解该选项卡，或者在该空屏幕呈现调用以下内容时触发一个函数：

this.props.navigation.navigate('DrawerOpen'); // open drawer
this.props.navigation.navigate('DrawerClose'); // close drawer
this.props.navigation.navigate('DrawerToggle'); // fires 'DrawerOpen'/'DrawerClose' accordingly

我希望有帮助..

于 2017-09-21T03:37:41.970 回答