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>