React-Navigation 抽屉和静态选项卡导航

Question

我正在从 react navigator 切换到 react-navigation，我实际上对这种方法很好，但遇到了一个问题。

我想使用抽屉式导航和底部对齐的 Tab-Navigation。 这部分按预期工作 - 这里没有问题。

我希望使用 3 个按钮修复选项卡式导航，这些按钮将在整个应用程序中具有相同的操作。 （例如仪表板/搜索/收藏夹）

您可以从仪表板更深入地导航。正如我现在所做的那样，选项卡的标签以前“仪表板”更改为导航到项目的名称。

为了澄清，我在 Dashboard-Screen-Tab 中添加了一个堆栈导航，以便用户可以浏览这些页面。

在标签的堆栈中导航时，如何防止标签的标签和操作发生变化？ 基本上我想在每个屏幕上都有一个固定的标签导航。

我应该创建一个固定的视图组件来实现吗？

这是我的设置： 应用.js

        const MetaTabNavigator = TabNavigator({
        Dashboard: { 
            screen: MachineNavigator
        },
        Search: { screen: SearchScreen },
        Favourites: { screen: FavouritesScreen },
    },
        {
            tabBarPosition: Platform.OS === "ios" ? 'bottom' : 'top',
            animationEnabled: true,
            tabBarOptions: {
                activeTintColor: STYLES.HIGHLIGHT_COLOR
            },
            swipeEnabled: false,
            backBehavior: 'none'

        });

    const MetaDrawerNavigator = DrawerNavigator({
        Home: {
            screen: MetaTabNavigator,
            navigationOptions: {
                drawer: {
                    label: 'Drawer',
                    icon: ({ tintColor }) => <Icon name="rocket" size={24} />
                },
            },
        }
    },
        {
            contentComponent: props => <Menu {...props} />
        }
    );


    AppRegistry.registerComponent('myApp', () => MetaDrawerNavigator);

机器导航器

        const MachineNavigator = StackNavigator({
        Main: {
            screen: MachineOverview,
            navigationOptions: ({ navigation }) => ({
                title: "Dashboard",
                headerLeft: (
                    <TouchableOpacity onPress={() => navigation.navigate("DrawerOpen")}>
                        <IOSIcon name="ios-menu" size={30} />
                    </TouchableOpacity>
                ),
                headerStyle: { paddingRight: 10, paddingLeft: 10 }
            })
        },
        Category: {
            screen: Category,
            navigationOptions: (props) => ({
                title: "Kategorie",
            })
        },

        ItemDetail: {
            screen: ItemDetail,
            navigationOptions: (props) => ({
                title: "Video",
            })
        }
    })

    export default MachineNavigator;

Answer 1

根据this issue，可以在tab配置中添加tabBarLabel属性来控制标签：

const MetaTabNavigator = TabNavigator({
    Dashboard: { 
        screen: MachineNavigator, navigationOptions: {tabBarLabel: 'Dashboard'}
    },
    ...