Question

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

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

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

我该怎么做？你能帮忙吗？

------------- [code] ----------------

1）app.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>
        );
    }

}

Answer 1

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

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

在iOS Human Interface Guidelines的TabBar部分中...。

当人们导航到应用程序中的不同区域时，不要隐藏标签栏。标签栏可为您的应用启用全局导航，因此它在任何地方都应保持可见。模态视图例外。由于模态视图为人们提供了一种单独的体验，使他们在完成后便会被解雇，因此这并不是应用程序整体导航的一部分。

使用徽章进行通俗易懂的沟通。您可以在标签上显示徽章-包含白色文本和数字或感叹号的红色椭圆形，以指示新信息与该视图或模式相关联。

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

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

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

后续步骤

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

在反应导航中打开抽屉时如何移动tabBar

1 个答案: