Question

我正试图从下面的标签栏中隐藏“摘要”标签，但无法完全弄清楚该怎么做。

const Tab = createBottomTabNavigator({
Overview: {
    screen: Overview
},
Camera: {
    screen: Camera
},
Summary: {
    screen: Summary
}
}, {
tabBarPosition: 'top',
swipeEnabled: true,
tabBarOptions: {
    activeTintColor: '#f2f2f2',
    activeBackgroundColor: '#2EC4B6',
    inactiveTintColor: '#666',
    labelStyle: {
        fontSize: 22,
        padding: 12
    }
}
});

export default createAppContainer(Tab);

我该怎么做？

Answer 1

我通过使用自定义的BottomBar并在屏幕出现时隐藏了选项卡来解决了这个问题：

    tabBarComponent: (props) => (<BottomBar {...props} ></BottomBar>) //Navigator Configs

我的下栏是这样的：

import React from 'react'
import { BottomTabBar } from 'react-navigation-tabs'
import { View, TouchableWithoutFeedback, Dimensions } from 'react-native'
import { StyleSheet } from 'react-native';
var { height } = Dimensions.get("window")
const HiddenView = () => <View style={{ display: 'none' }} />
const TouchableWithoutFeedbackWrapper = ({
    onPress,
    onLongPress,
    testID,
    accessibilityLabel,
    ...props
}) => {
    return (
        <TouchableWithoutFeedback
            onPress={onPress}
            onLongPress={onLongPress}
            testID={testID}
            hitSlop={{
                left: 15,
                right: 15,
                top: 5,
                bottom: 5,
            }}
            accessibilityLabel={accessibilityLabel}
        >
            <View {...props} />
        </TouchableWithoutFeedback>
    )
}
export default TabBarComponent = props => {
    return <BottomTabBar
        {...props}
        style={styles.bottomBarStyle}
        getButtonComponent={({ route }) => {
            if (route.key === "Summary" )
                return HiddenView
            else return TouchableWithoutFeedbackWrapper
        }}
    />
}


const styles = StyleSheet.create({
    bottomBarStyle: {
        height: (height * 10.625) / 100
    }
})

让我知道这是否会带来新的问题

如何从Tabnavigator隐藏某个标签？

1 个答案: