离子图标未显示在反应本机中

Question

我正在尝试使用Ionicons通过选项卡导航器添加图标。

我正在从博览会/矢量图标导入它们

import { Ionicons } from '@expo/vector-icons';

然后，我将屏幕添加到导航器

const TabNavigator = createBottomTabNavigator(
  {
    Home: {screen: HomeStack},
    AddNew: {screen: AddNewScreen},
    Settings: {screen: SettingsStack},
  },

并在导航选项中启动我的离子图标

{
navigationOptions: ({ navigation }) => ({
  tabBarIcon: ({ focused, tintColor }) => {
    const { routeName } = navigation.state;
    var iconName;
    if (routeName === 'Home') {
      iconName = 'add-circle-outline';
    } else if (routeName === 'AddNew') {
      iconName = 'ios-add-circle';
    } else if (routeName === 'Settings') {
      iconName = 'md-options';
    }
    return <Ionicons name={iconName} size={25} color={tintColor} />;
  },  });

然后我设置我的应用容器并将其导出

const AppContainer = createAppContainer(TabNavigator);
export default AppContainer;

我尝试使用MaterialIcons而不是 Ionicon，结果相同。我的同行已经成功实现了ionicons，他们不必使用AppContainer来导出他们的导航器，所以我倾向于认为这就是问题所在。

已经有一段时间了，它对我不起作用。

Answer 1

该错误是由于未声明expo/vector-icon文件夹造成的。

我在终端中使用以下命令解决了它：

npm 安装@expo/矢量图标

Answer 2

这可以通过将以下行添加到 app/build.gradle 来解决

   apply from: "../../node_modules/react-native-vector-icons/fonts.gradle"

这有助于我获取图标，请注意不要将其粘贴到android/build.gradle中。