问题图标显示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