react-native - 问题 图标显示 BottomTabNav React-native

Question

我的 bottomTab 上的图标出现渲染问题，我使用 react-native-vector-icons 和 Ionicons 包。我尝试了几个图标，但结果仍然相同。我附上了一些对您有帮助的元素。

在这里你可以看到糟糕的渲染

你也可以在这里看到导入

import React, {Component} from 'react';
import 'react-native-gesture-handler';
import {Animated} from 'react-native';
import {NavigationContainer} from '@react-navigation/native';
import {createBottomTabNavigator} from '@react-navigation/bottom-tabs';
import Icon from 'react-native-vector-icons/Ionicons';
import Setting from '../Settings/Setting';
import Decibel from '../Decibel';
import Dashboard from '../Dashboard';
import Classement from '../Classement/Classement';
import ChoixSport from '../ChoixEquipes/ChoixSport';

const Tab = createBottomTabNavigator();

这里是我的代码

render() {
    return (
      <Tab.Navigator
        initialRouteName="Dashboard"
        tabBarOptions={{
          activeBackgroundColor: '#000000',
          activeTintColor: '#CFF932',
          inactiveBackgroundColor: '#000000',
        }}>
        <Tab.Screen
          name="Dashboard"
          component={Dashboard}
          options={{
            tabBarIcon: ({color, size}) => (
              <Icon name="ios-home" size={size} color={color} />
            ),
          }}
        />
        <Tab.Screen name="Settings" component={Setting} />

感谢大家的宝贵时间和帮助!

Answer 1

你可以在这里看到

https://github.com/react-navigation/react-navigation/issues/6867

这里

https://github.com/oblador/react-native-vector-icons/issues/1117

React Native Vector Icons 的其他用户也经历过同样的事情。

您可以在下面的评论中查看解决方案

https://github.com/oblador/react-native-vector-icons/issues/1117#issuecomment-589958315

需要检查是否在Android部分添加了这个配置。

您可以在 React Native Vector Icons 的文档中查看更多详细信息:

https://github.com/oblador/react-native-vector-icons#android