如何在react-native-router-flux中的TabIcon下删除文本

时间:2019-02-27 07:45:18

标签: react-native react-native-android react-navigation react-native-ios

我无法删除react-native-router-flux的TabBar中TabIcon下的文本。这是我的TabBar的屏幕: enter image description here

这是我的路由器代码:

const TabBar = ({focused}) => (
    <View>
        <Icon name="search" type="MaterialIcons" style={{fontSize: 28, color: focused ? 'red': 'white'}} />
    </View>
)

export default () => (
    <Router>
        <Scene hideNavBar>

            <Scene key="tabbar" tabs tabBarStyle={{backgroundColor: '#000'}}>

                <Scene key="list" title="Ahlo" component={List} hideNavBar icon={TabBar} />

                <Scene key="search" component={search} hideNavBar icon={TabBar} />

                <Scene key="account" component={account} hideNavBar icon={TabBar} />
            </Scene>

            <Scene key="article" component={article} />

            <Scene key="comment" component={comment} />

            <Scene key="register" component={register} />

            <Scene key="auth" component={auth} />
        </Scene>
    </Router>
)

在每个教程中,我都看到TabIcon下的文本丢失了,但是我有它。我在这里做什么错了?

1 个答案:

答案 0 :(得分:0)

您可以尝试通过向showLabel的父母或特定孩子Scene添加false道具,(默认值为true

因此您的标签栏场景代码将类似于:

<Scene key="tabbar" showLabel={false} tabs tabBarStyle={{backgroundColor: "#000"}}>
       <Scene key="list" component={List} showLabel={false} hideNavBar icon={TabBar} />
       <Scene key="search" component={search} showLabel={false} hideNavBar icon={TabBar} />
       <Scene key="account" component={account} showLabel={false} hideNavBar icon={TabBar} />
</Scene>

希望这会有所帮助。