无法使用 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>