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

确保按这些名称命名的图标仍然存在。我注意到我的许多-outline图标已不再使用该先前的名称。

Answer 2

您的IDE正确，不使用tabBarIcon，因为它们是stacknavigator的navigationOptions，它没有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',
        },
    });

Source

tabBarIcon未显示在createBottomTabNavigator上

2 个答案: