android - tabBarIcon 未显示在 createBottomTabNavigator 上

Question

自从我更新了 react-navigation(从 v2 到 v3)后，我在 createBottomTabNavigator 中的图标不再出现在标签上方。当我查看文档时，我找不到解决方案。你能帮帮我吗？

我的底部导航代码:

import React from 'react';
import {
    createAppContainer,
    createBottomTabNavigator,
    createStackNavigator,
    createSwitchNavigator
} from 'react-navigation';
import PronosticsScreen from "../screens/PronosticsScreen";
import BookmakersScreen from "../screens/BookmakersScreen";
import StatsScreen from "../screens/StatsScreen";
import TabBarIcon from '../components/TabBarIcon';
import {Platform} from "react-native";

const PronosticsStack = createStackNavigator({
    Pronostics: PronosticsScreen,
});

PronosticsStack.navigationOptions = {
    tabBarLabel: 'Pronostics',
    tabBarIcon: ({focused}) => (
        <TabBarIcon
            focused={focused}
            name={
                Platform.OS === 'ios'
                    ? `ios-paper${focused ? '' : '-outline'}`
                    : 'md-paper'
            }
        />
    ),
};

const BookmakersStack = createStackNavigator({
    Bookmakers: BookmakersScreen,
});

BookmakersStack.navigationOptions = {
    tabBarLabel: 'Bookmakers',
    tabBarIcon: ({focused}) => (
        <TabBarIcon
            focused={focused}
            name={
                Platform.OS === 'ios'
                    ? `ios-paper${focused ? '' : '-outline'}`
                    : 'md-paper'
            }
        />
    ),
};

const StatsStack = createStackNavigator({
    Stats: StatsScreen,
});

StatsStack.navigationOptions = {
    tabBarLabel: 'Stats',
    tabBarIcon: ({focused}) => (
        <TabBarIcon
            focused={focused}
            name={
                Platform.OS === 'ios'
                    ? `ios-paper${focused ? '' : '-outline'}`
                    : 'md-paper'
            }
        />
    ),
};

const BottomTabNavigator = createBottomTabNavigator({
        Pronostics: PronosticsScreen,
        Bookmakers: BookmakersScreen,
        Stats: StatsScreen,
    },
    {
        tabBarOptions: {
            showIcon: true,
            activeTintColor: '#c7943e',
            activeBackgroundColor: '#000000',
            inactiveTintColor: '#c7943e',
            inactiveBackgroundColor: '#000000',
        },
    });

const SwitchNavigator = createSwitchNavigator(
    {
        Bottom: BottomTabNavigator,
    }
);

export default createAppContainer(SwitchNavigator);

此外，我的 IDE 告诉我未使用 tabBarIcon 属性..

预先感谢您的帮助

Answer 1

确保这些名称的图标仍然存在。我注意到我的许多 -outline 图标不再以以前的名称存在。