代码之家 › 专栏 › 技术社区 › Valentin Harrang

选项卡栏图标未显示在CreateBoottomTabNavigator上

mobile react-native reactjs ios android

Valentin Harrang · 技术社区 · 6 年前

自从我更新了react导航(从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);

提前感谢您的帮助

2 回复 | 直到 6 年前

Chris Geirman 6 年前

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

RegularGuy 6 年前

你的IDE是对的,没有使用tabBarIcon,因为这些是stacknavigator的导航选项,它们没有tabBarIcon属性。你应该删除它们,然后在CreateBoottomTabNavigator中对每个屏幕执行此操作

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