Невозможно увидеть текст для неактивной вкладки, используя createMaterialBottomTab и React Native

Question

Я очень новичок в React и пытаюсь установить цвет для текста и других стилей для неактивных вкладок на моей нижней панели, но уже несколько часов на нем и не могу заставить его работать, поскольку текст не ' не появляется, если это не выбранная вкладка. Я использую createMaterialBottomTab .

Это весь мой экран, если я могу получить какую-либо помощь, пожалуйста:

import React from 'react'
import { Platform, Text, View } from 'react-native'
import { createAppContainer } from 'react-navigation'
import { createBottomTabNavigator } from 'react-navigation-tabs'
import { createStackNavigator } from 'react-navigation-stack'
import { createMaterialBottomTabNavigator } from 'react-navigation-material-bottom-tabs'

import HeadlinesScreen from '../screens/HeadlinesScreen'
import IrelandScreen from '../screens/IrelandScreen'
import TechnologyScreen from '../screens/TechnologyScreen'

const defaultStackNavOptions = {
    headerStyle: {
        backgroundColor: '#4a148c'
    },
    headerTintColor: 'white',
}

const NewsNavigator = createStackNavigator(
    {
        Headlines: HeadlinesScreen,
        Ireland: IrelandScreen,
        Technology: TechnologyScreen
    })

const HeadLinesNavigator = createStackNavigator(
    {
        Headlines: HeadlinesScreen
    }, {
    defaultNavigationOptions: defaultStackNavOptions,
    navigationOptions: {
        tabBarColor: 'green'
    }
})

const IrelandNavigator = createStackNavigator(
    {
        Ireland: IrelandScreen
    }, {
    defaultNavigationOptions: defaultStackNavOptions,
    navigationOptions: {
        tabBarColor: 'red'
    }
})

const TechnologyNavigator = createStackNavigator(
    {
        Technology: TechnologyScreen
    }, {
    defaultNavigationOptions: defaultStackNavOptions,
    navigationOptions: {
        tabBarColor: 'purple'
    }
})

const config = {
    headerMode: 'none',
    initialRouteName: 'Headlines',
    shifting: true,
    activeColor: 'black',
    inactiveColor: 'black',
    activeTintColor: 'black',
    inactiveTintColor: 'black',
    labeled: true,
}

const NewsAllNavigator = createMaterialBottomTabNavigator({
    Headlines: HeadLinesNavigator,
    Ireland: IrelandNavigator,
    Technology: TechnologyNavigator,
}, config)

export default createAppContainer(NewsAllNavigator)

Большое спасибо.

ОБНОВЛЕНО

Я заметил, что теперь я может видеть элементов, если я добавлю значки в нижнюю строку . Тем не менее ярлыки, если элемент не выбран. Я предполагаю, что это может быть поведение по умолчанию, но не уверен, что оно может быть перезаписано?

const HeadLinesNavigator = createStackNavigator(
    {
        Headlines: HeadlinesScreen
    }, {
    headerLayoutPreset: 'center',
    defaultNavigationOptions: defaultStackNavOptions,
    navigationOptions: {
        // tabBarIcon: <TabItem label='Headlines' />,
        tabBarIcon: ({ tintColor }) => (
            <View>
                <FontAwesome name='newspaper-o' size={25} color='white' />
            </View>
        ),
        tabBarColor: 'green',
    }
})

Answer 1

Вы можете использовать этот синтаксис для создания bottomTabNavigation из response-navigation v5. Также обратите внимание, чтобы импортировать экран, который я использовал в коде. Ссылка на официальные документы здесь

import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";

const BottomNavigator = () => {
  const BottomNavigation = createBottomTabNavigator();

  return (
    <BottomNavigation.Navigator>
      <BottomNavigation.Screen
        name="Home"
        component={HomeStack}
        options={{
          tabBarIcon: ({ color, size }) => (
            <MaterialCommunityIcons name="home" color={color} size={size} />
          ),
        }}
      />
      <BottomNavigation.Screen
        name="Exam"
        component={ExamStack}
        options={{
          tabBarIcon: ({ color, size }) => (
            <MaterialCommunityIcons name="book" color={color} size={size} />
          ),
        }}
      />
      <BottomNavigation.Screen
        name="Profile"
        component={ProfileStack}
        options={{
          tabBarIcon: ({ color, size }) => (
            <MaterialCommunityIcons name="account" color={color} size={size} />
          ),
        }}
      />
      <BottomNavigation.Screen
        name="Settings"
        component={SettingsScreen}
        options={{
          tabBarIcon: ({ color, size }) => (
            <MaterialCommunityIcons name="settings" color={color} size={size} />
          ),
        }}
      />
    </BottomNavigation.Navigator>
  );
};

export default BottomNavigator;

пакет. json

"@react-navigation/bottom-tabs": "^5.0.5",
"@react-navigation/native": "^5.0.5",
"@react-navigation/stack": "^5.0.5",
"react-native-reanimated": "~1.4.0",
"react-native-safe-area-context": "0.6.0",
"react-native-screens": "2.0.0-alpha.12",
"react-native-web": "^0.11.7",
"react-native-webview": "7.4.3"