首页 文章

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

提问于
浏览
1

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

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

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

从仪表板中,您可以更深入地浏览一个级别 . 正如我现在所做的那样,Tab的标签以前称为“仪表板”更改为导航到项目的名称 .

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

如何在选项卡堆栈中导航时阻止选项卡的实验和操作更改?基本上我想在每个屏幕上固定标签导航 .

我应该创建一个固定的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;

1 回答

  • 1

    根据this issue,您可以在选项卡配置中添加 tabBarLabel 属性来控制标签:

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

相关问题