如何在反应原生应用程序中添加@expo/vector-icons？答案

【问题标题】：how to add @expo/vector-icons in react native app?如何在反应原生应用程序中添加@expo/vector-icons？
【发布时间】：2018-10-10 12:38:47
【问题描述】：

我正在使用@expo/vector-icons 这是我的 package.json 文件

 "dependencies": {
     "@expo/vector-icons": "^4.1.1",
     "color": "^1.0.3",
     "expo": "^30.0.1",
     "moment": "^2.22.2",
     "react": "16.3.1",
     "react-native": "https://github.com/expo/react-native/archive/sdk- 
      30.0.0.tar.gz",
    "react-native-extended-stylesheet": "^0.4.0"  },

当我在我的组件中导入@expo/vector-icon 库时

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

它给出了错误

【问题讨论】：

标签： react-native expo

【解决方案1】：

在您的依赖项 (package.json) 中删除 @expo/vector-icons。它们包含在 expo 包中，不同版本的 expo 和 expo/vector-icons 可能会导致类似这样的错误。

来自official docs：

这个库默认安装在获取的模板项目上通过 expo init - 它是 expo 包的一部分。这包括流行的图标集，您可以使用 @expo/vector-icons 目录。

2021 年更新：官方文档稍作改动，不再在以下位置搜索图标：

@expo/vector-icons 目录

您现在可以使用以下方式进行搜索：

icons.expo.fyi

这使它比以前容易得多。

【讨论】：

是的，但是在指定要使用的图标时使用什么名称？
嗯，问题是关于 React Native 应用程序，而不是 expo ......所以，不确定你的答案在这里如何应用。
@VladMiller OP 正在使用 Expo... 查看依赖项。此外，这解决了 OP 的问题，因此得到了“已接受的答案”标记。
@c-chavez 如果您退出，expo 仍将保留在依赖项列表中。因此，问题（或答案）具有误导性。答案不适用于非 expo RN，或者 OP 应该提到它是一个使用 expo 的 RN 应用。
@VladMiller OP 还在标签中添加了 Expo，恕我直言，如果 Dependencies 和 Tags 都显示“Expo”，那么看起来 OP 实际上正在使用 Expo。如果 OP 不是，OP 应该澄清，哪个 OP 没有。由于 OP 将其标记为答案，并且答案是将 @expo/vector-icons 作为依赖项删除，因此看起来 OP 确实在使用 Expo（这是使用两个依赖项时的典型问题，因为它确实发生在我之前）。当然，如果 OP 不使用 Expo，则应该编写并选择另一个答案，我完全可以接受 :)

【解决方案2】：

该库默认提供，因此您无需安装 @expo/vector-icons。

例如，您可以这样做：

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

然后你可以像这样使用它：

<Ionicons name="ios-pizza" color="red" size={200} />

仅供参考，这个目录有助于找到不同的图标https://expo.github.io/vector-icons/

【讨论】：

【解决方案3】：

转到“https://icons.expo.fyi/”选择你想要的任何东西，然后通过复制导入，然后使用它。


    import React from 'react'
    import { Entypo } from '@expo/vector-icons';
    import { View } from 'react-native';

    export const Example = () => {
      return(
        <View>
          <Entypo name="plus" size={24} color="black" />
        </View>
      )
    }

【讨论】：

【解决方案4】：

删除您的节点模块文件夹并运行 expo init。并运行项目

【讨论】：

【解决方案5】：

你有没有注意到我想使用 create-react-native-app 而不是 expo init 以及稍后使用 expo 图标

npm i -g create-react-native-app
 create-react-native-app my-project
 cd my-project
 npm start

【讨论】：