2

我在我的应用程序中都使用了 TabNavigator 和 DrawerNavigator。

当我使用“滑动”选项打开抽屉时，内容会随抽屉滑动，但 TabBar 不会一起滑动。

在此处输入图像描述

我想让 TabBar 一起滑动，但我找不到任何选项。

我怎样才能做到这一点？你能帮忙吗？

- - - - - - -[代码] - - - - - - - -

1) 应用程序.js

    ...skip ...

    const DailySalesStack = createStackNavigator({
        DailySalesMain: DailySalesMain,
    },
    {
        defaultNavigationOptions:{
            header:null
        },
        initialRouteName:'DailySalesMain'
    });

    const DailyRivalRankStack = createStackNavigator({
        DailyRivalRankMain: DailyRivalRankMain,
    },
    {
        defaultNavigationOptions:{
            header:null
        },
        initialRouteName:'DailyRivalRankMain'
    });

    const SalesAnalysisStack = createStackNavigator({
        SalesAnalysisMain: SalesAnalysisMain,
    },
    {
        defaultNavigationOptions:{
            header:null
        },
        initialRouteName:'SalesAnalysisMain'
    });

    const DailySalesAnalysisStack = createStackNavigator({
        DailySalesAnalysisMain: DailySalesAnalysisMain,
    },
    {
        defaultNavigationOptions:{
            header:null
        },
        initialRouteName:'DailySalesAnalysisMain'
    });

    /// DRAWER!
    const SalesStack = createDrawerNavigator({
        DailySales: {
            screen: DailySalesStack,
        },
        DailyRivalRank: {
            screen: DailyRivalRankStack,
        },
        SalesAnalysis: {
            screen: SalesAnalysisStack,
        },
        DailySalesAnalysis: {
            screen: DailySalesAnalysisStack,
        },
    },
    {
        contentComponent:SalesSlideMenu,
        drawerType: 'slide',
        drawerWidth:230*REM,
    }
    );

...skip...

    /// BOTTOM TAB
    export default createAppContainer(createBottomTabNavigator(
        {
            MainStack:MainStack,
            ApprovalStack:ApprovalStack,
            SalesStack:SalesStack,
            OrganizationStack:OrganizationStack,
            SettingStack:SettingStack,
        },
        {
          tabBarComponent: TabBar,
        }
    ));

2）tabBar.js

const TAB_LIST = [
    require('../../resources/images/tabIcon_main.png'),
    require('../../resources/images/tabIcon_approval.png'),
    require('../../resources/images/tabIcon_sales.png'),
    require('../../resources/images/tabIcon_organization.png'),
    require('../../resources/images/tabIcon_settings.png'),
];

export default class TabBar extends React.Component {
    constructor(props) {
        super(props);
    }

    render() {      
        console.log("[TabBar.js] : Render ====");

        const {
            onTabPress,
            navigation
        } = this.props;

        const { routes, index: activeRouteIndex } = navigation.state;

        return (
            <SafeAreaView style={{backgroundColor:'rgb(250,250,250)'}}>
                <View style={styles.rootContainer}>
                {routes.map((route, routeIndex) => {
                    const isRouteActive = routeIndex === activeRouteIndex;
                    return (
                        <TouchableWithoutFeedback key={routeIndex} onPress={() => {onTabPress({ route });}}>
                            <View style={styles.tabIconContainer}>
                                <Image style={[styles.icon,isRouteActive&&{tintColor:'black'}]} source={TAB_LIST[routeIndex]} resizeMode={'contain'}/>
                                {/* <View style={[styles.badge]}><Text style={[styles.text,styles.badgeNumber]}>12</Text></View> */}
                            </View>
                        </TouchableWithoutFeedback>
                    );
                })}
                </View>
            </SafeAreaView>
        );
    }
}

3) SlideMenu.js

const MENU_LIST = [
   {'icon':require('../../resources/images/dailySales.png'),'label':'Daily Sales','subLabel':'','route':'DailySales'},
   {'icon':require('../../resources/images/rivalRank.png'),'label':'Daily Rival Rank','subLabel':'','route':'DailyRivalRank'},
   {'icon':require('../../resources/images/salesAnalysis.png'),'label':'Sales Analysis','subLabel':'','route':'SalesAnalysis'},
   {'icon':require('../../resources/images/dailySalesAnalysis.png'),'label':'Daily Sales Analysis','subLabel':'','route':'DailySalesAnalysis'},
]

class SlideMenuTab extends React.Component {
    constructor(props) {
        super(props);
    }

    render() {
        return(
            <View style={{flex:0}}>
                <TouchableWithoutFeedback onPress={()=>this.props.navigation.navigate(this.props.data.route+"Main")}>
                    <View style={[styles.tabContainer,this.props.focused&&{backgroundColor:'rgb(247,247,247)'}]}>
                        <Image style={styles.tabIcon} source={this.props.data.icon} resizeMode={'contain'}/>
                        <View style={styles.labelContainer}>
                            <Text style={[styles.text,styles.label]}>{this.props.data.label}</Text>
                            <Text style={[styles.text,styles.subLabel]}>{this.props.data.subLabel}</Text>
                        </View>
                    </View>
                </TouchableWithoutFeedback>
            </View>
        )
    }
}

export default class SalesSideMenu extends React.Component {
    constructor(props) {
        super(props);
        console.log("[SalesSideMenu.js] : Constructor");
    }

    render() {
        console.log("[SalesSideMenu.js] : render ====");
        let menuList = [];

        MENU_LIST.forEach((data)=>{
            let focused = this.props.activeItemKey === data.route;
            menuList.push(
                <SlideMenuTab data={data} focused={focused} navigation={this.props.navigation}/>
            );
        })

        return (
            <SafeAreaView forceInset={{ top: 'always', horizontal: 'never' }}>
                <View style={styles.rootContainer}>
                    {menuList}
                </View>
            </SafeAreaView>
        );
    }

}

4) 带抽屉的屏幕

export default class DailySalesMain extends React.Component {
    constructor(props) {
        super(props);
    }


    render() {
        console.log("[DailySalesMain.js] : render ====");
        return (
            <View style={{flex:1,backgroundColor:'white',alignItems:'center',justifyContent:'center'}}>
                <TouchableWithoutFeedback onPress={()=>this.props.navigation.openDrawer()}>
                    <View style={{width:'100%',height:50}}>
                        <View style={{width:50,height:50,backgroundColor:'blue'}}></View>
                    </View>
                </TouchableWithoutFeedback>
                <Text>DailySalesMain</Text>
            </View>
        );
    }

}
4

1 回答 1

0

如果您正在使用 React Native... 这应该是至少在 iOS 中的默认行为。Android Material Design 支持将 Drawer 作为设计目标，因此如果您想隐藏 TabBar，只需自定义一个或将 TabBar 包含在 Drawer 中即可。

但是警告，当您上传您的应用程序进行修订时，隐藏 TabBar 有时可能会在 Apple Store 中带来错误。

来自 iOS 的人机界面指南中的 TabBar 部分......

当人们导航到您应用中的不同区域时，不要隐藏标签栏。标签栏为您的应用程序启用全局导航，因此它应该在任何地方保持可见。模态视图中的例外情况。因为模态视图给人们一个单独的体验，当他们完成时他们会忽略它，它不是你的应用程序整体导航的一部分。

使用徽章进行不引人注目的交流。您可以在选项卡上显示一个标记（一个包含白色文本和一个数字或感叹号的红色椭圆），以表明新信息与该视图或模式相关联。

换句话说..如果您打算在您的应用程序中支持 iOS，您应该尝试始终以某种方式显示 TabBar，否则商店可能会给您一些类似这样的可用性抱怨。

我们注意到您的应用程序的多个屏幕过于拥挤或布局方式使您的应用程序难以使用。

请参阅随附的屏幕截图以供参考。

下一步

要解决此问题，请修改您的应用程序以确保屏幕上的内容和控件易于阅读和交互。

于 2020-01-08T18:08:15.497 回答