Question

我正在从反应导航器切换到反应导航，我实际上对这种方法很好，但是却遇到了一个问题。

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

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

从仪表板中，您可以更深入地浏览一个级别。正如我现在所做的那样，Tab的标签以前是＆＃34; Dashboard＆＃34;更改为导航到项目的名称。

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

如何阻止标签＆＃39;在标签内导航时要改变的实验室和行动＆＃39;堆？基本上我想在每个屏幕上都有固定的标签导航。

我应该创建一个固定的View-Component来实现吗？

这是我的设置： App.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);

MachineNavigator

        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，您可以在标签配置中添加tabBarLabel属性来控制标签：

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

反应导航抽屉和静态标签导航

1 个答案: