Метка createBottomTabNavigator не отображается - React Native

Question

Итак, я вытащил один из моих собственных проектов, созданных несколько месяцев назад, и во время его использования обнаружил, что 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, и я полагаю, что проблема решится сама собой, если вы удалите этот бит. Вы можете легко добиться того же эффекта, просто введя текст метки в верхнем регистре, где вы объявляете маршрут.