react-native - 使用 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

我有同样的问题。您搜索的选项是：shifting={false}。然后你会得到图标下方显示的所有标签。

<TabNavigator.Navigator
            initialRouteName="myScreen"
            shifting={false}
...
            <TabNavigator.Screen
...
            />
</TabNavigator.Navigator>

Answer 2

您可以使用此语法从 react-navigation v5 创建 bottomTabNavigation。另请注意导入我在代码中使用的屏幕。
官方文档的链接在这里

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"