Question

因此，几个月前，我撤出了我的一个React Native项目，在使用它时，我发现TabNavigator已过时。因此，我现在按照他们的建议使用createBottomTabNavigator。它似乎开箱即用，但是由于某些原因我的标签没有显示，仅显示选项卡中的图标。

我正在查看文档，并说它实际上是显示标签的默认true。由于某种原因，标签将不会显示。还尝试将showLabel设置为true，但这没有做任何其他事情。遇到相同问题的人可以解决吗？

我的代码

import React from 'react';
import { Text, View, Button, StyleSheet } from 'react-native';

// Icons for tabs
import I from 'react-native-vector-icons/MaterialCommunityIcons';

// Navigation dep
import { createBottomTabNavigator, createStackNavigator } from 'react-navigation';

// Custom components/screens
import HomeScreen from './screens/HomeScreen'
import FavoritesScreen from './screens/FavoritesScreen'
import AccountScreen from './screens/AccountScreen'

// Custom styles
import HeaderBar from './styles/HeaderBar'

// Tabs navigation
const HomeStack = createStackNavigator({
    Home: HomeScreen
});

const FavoritesStack = createStackNavigator({
    Favorites: FavoritesScreen
});

const AccountStack = createStackNavigator({
    Account: AccountScreen
});

export default createBottomTabNavigator(
    {
        Home: HomeStack,
        Favorites: FavoritesStack,
        Account: AccountStack,
    },
    {
        navigationOptions: ({ navigation }) => ({
            tabBarIcon: ({ focused, tintColor }) => {

                const { routeName } = navigation.state;
                let iconName;
                if (routeName === 'Home') {
                    iconName = `tag${focused ? '' : '-outline'}`;
                } else if (routeName === 'Favorites') {
                    iconName = `heart${focused ? '' : '-outline'}`;
                } else {
                    iconName = `account-box${focused ? '' : '-outline'}`;
                }

                return <I name={iconName} size={25} color={tintColor} />;
            },
            tabBarLabel: () => {
                const { routeName } = navigation.state;
                return routeName.toUpperCase();

            }
        }),

        tabBarOptions: {
            activeTintColor: '#E95736',
            inactiveTintColor: 'gray',
            labelStyle: {
                fontSize: 9,
                fontFamily: 'Rubik-Medium'
            },
            style: {
                backgroundColor: '#FAF8F8',
                borderTopWidth: 0.5
            },
        },
    }

）;

Answer 1

我认为该问题与tabBarLabel有关，并且我相信，如果您删除该位，问题将自行解决。您只需将标签文本声明为大写字母即可轻松实现相同的效果。

createBottomTabNavigator的标签未显示-React Native

1 个答案: