Question

我正在尝试使用react-native-vector-icons在我的应用程序中使用自定义图标设置MaterialBottomTabNavigator，但是这些图标没有显示。我在NavigatorConfig中做错了吗？

起初我以为是因为我的图标加载不正确，但是将它们放置在另一个屏幕上的“视图”中（除了MaterialBottomTab内的任何位置）都不会出现问题。即使带有矢量图标的标准MaterialIcons也未显示在bottomTab中，但是其他任何地方都没有问题。

我尝试过转移配置，将tabBarIcon放置在屏幕配置和导航器配置中，但仍然没有结果。我也尝试了showIcon选项，但也没有结果。

这是我的代码：

export const userNavigation = createMaterialBottomTabNavigator({Bars, Settings}, {
    Bars: {
        screen: Bars,
        navigationOptions: {
            tabBarIcon: ({focused}) => <Icon name="bars" size={20} color={focused ? '#FFF' : '#DACE91'}/>,
        },
    },
    shifting: false,
    labeled: true,
    activeColor: '#FFF',
    inactiveColor: '#DACE91',
});

我希望这些图标会显示在bottomTab中，但是我没有收到任何错误消息或其他任何关于为什么它们不显示的反馈。

Answer 1

您要在选项卡配置中放入路由配置。

createMaterialBottomTabNavigator({
                                Bars:{
                                    screen: Bars,
                                    navigationOptions:{
                                                      tabBarIcon: ({focused}) =><Icon name="bars" size={20} color={focused ? '#FFF' : '#DACE91'}/>,
                                          }
                                     } 
                                },{
                                    shifting: false,
                                    labeled: true,
                                    activeColor: '#FFF',
                                    inactiveColor: '#DACE91',
                                   })

希望这会有所帮助！

Answer 2

然后修复图标将这些添加到Bootom导航中转移：错误，标记为：真

createMaterialBottomTabNavigator中的图标未显示

2 个答案: