tabBarIcon не отображается на createBottomTabNavigator

Question

Поскольку я обновил реагирующую навигацию (с 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

ваша IDE верна, tabBarIcon не используется, так как это навигационные опции стека-навигатора, у которых нет свойства tabBarIcon. Вы должны удалить их, а затем в вашем createBottomTabNavigator сделать это для каждого экрана

const BottomTabNavigator = createBottomTabNavigator({
        Pronostics: {
      screen: PronosticsScreen,
      navigationOptions: {
        tabBarLabel: 'Pronostics',
        tabBarIcon: ({ focused }) => (
          <TabBarIcon
            focused={focused}
            name={
                Platform.OS === 'ios'
                    ? `ios-paper${focused ? '' : '-outline'}`
                    : 'md-paper'
            }
        />
        ),
      },
    },
        Bookmakers: BookmakersScreen, //repeat
        Stats: StatsScreen,//repeat
    },
    {
        tabBarOptions: {
            showIcon: true,
            activeTintColor: '#c7943e',
            activeBackgroundColor: '#000000',
            inactiveTintColor: '#c7943e',
            inactiveBackgroundColor: '#000000',
        },
    });

Источник

Answer 2

Убедитесь, что значки все еще существуют под этими именами.Я заметил, что многие из моих -outline значков больше не существуют под этим предыдущим именем.