React Native - 在Tab Navigator中的Drawer Navigator中的Stack Navigator

Question

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

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配置。图标消失，标签变为“抽屉”（TabNavigator声明中的名称），而不是
中设置的原始tabBarLabel值
• Stack Navigator的Header在Drawer上方仍然可见，并且丢失了我在Screen1 navigationOptions中设置的样式。 （对于这个，我最终可以删除Stack Navigator并创建我自己的头文件，它只是更快地使用Stack Navigator）

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

Answer 1

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

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

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

我希望有帮助..