如何使用 React Native 矢量图标？答案

【问题标题】：How to use React Native vector icons?如何使用 React Native 矢量图标？
【发布时间】：2017-02-23 16:15:03
【问题描述】：

npm install react-native-vector-icons

但是如果我在 index.android.js 中使用它

<Icon name="ios-add" size={30} color="#4F8EF7" />

我得到一个正方形，中间有一个 X 而不是图标。

为什么？

编辑：

如果我尝试使用“npm install react-native-vector-icons --save”安装它，则会收到以下错误：

C:\Users\xrobot\Desktop\React Native\AwesomeProject>npm install react-native-vector-icons --save

    npm ERR! Windows_NT 10.0.14393
    npm ERR! argv "C:\\Program Files\\nodejs\\node.exe" "C:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js" "install" "react-native-vector-icons" "--save"
    npm ERR! node v6.9.5
    npm ERR! npm  v3.10.10
    npm ERR! path C:\Users\xrobot\Desktop\React Native\AwesomeProject\node_modules\.staging\react-native-vector-icons-73f301e7
    npm ERR! code EPERM
    npm ERR! errno -4048
    npm ERR! syscall rename

    npm ERR! Error: EPERM: operation not permitted, rename 'C:\Users\xrobot\Desktop\React Native\AwesomeProject\node_modules\.staging\react-native-vector-icons-73f301e7' -> 'C:\Users\xrobot\Desktop\React Native\AwesomeProject\node_modules\react-native-vector-icons'
    npm ERR!     at destStatted (C:\Program Files\nodejs\node_modules\npm\lib\install\action\finalize.js:25:7)
    npm ERR!     at C:\Program Files\nodejs\node_modules\npm\node_modules\graceful-fs\polyfills.js:264:29
    npm ERR!     at FSReqWrap.oncomplete (fs.js:123:15)
    npm ERR!
    npm ERR! Error: EPERM: operation not permitted, rename 'C:\Users\xrobot\Desktop\React Native\AwesomeProject\node_modules\.staging\react-native-vector-icons-73f301e7' -> 'C:\Users\xrobot\Desktop\React Native\AwesomeProject\node_modules\react-native-vector-icons'
    npm ERR!     at Error (native)
    npm ERR!  { Error: EPERM: operation not permitted, rename 'C:\Users\xrobot\Desktop\React Native\AwesomeProject\node_modules\.staging\react-native-vector-icons-73f301e7' -> 'C:\Users\emiliano\Desktop\React Native\AwesomeProject\node_modules\react-native-vector-icons'
    npm ERR!     at destStatted (C:\Program Files\nodejs\node_modules\npm\lib\install\action\finalize.js:25:7)
    npm ERR!     at C:\Program Files\nodejs\node_modules\npm\node_modules\graceful-fs\polyfills.js:264:29
    npm ERR!     at FSReqWrap.oncomplete (fs.js:123:15)
    npm ERR!
    npm ERR! Error: EPERM: operation not permitted, rename 'C:\Users\emiliano\Desktop\React Native\AwesomeProject\node_modules\.staging\react-native-vector-icons-73f301e7' -> 'C:\Users\xrobot\Desktop\React Native\AwesomeProject\node_modules\react-native-vector-icons'
    npm ERR!     at Error (native) parent: 'AwesomeProject' }
    npm ERR!
    npm ERR! Please try running this command again as root/Administrator.

    npm ERR! Please include the following file with any support request:
    npm ERR!     C:\Users\xrobot\Desktop\React Native\AwesomeProject\npm-debug.log

    C:\Users\xrobot\Desktop\React Native\AwesomeProject>npm install react-native-vector-icons
    AwesomeProject@0.0.1 C:\Users\xrobot\Desktop\React Native\AwesomeProject
    `-- react-native-vector-icons@4.0.0

编辑 2：

C:\Users\xrobot\Desktop\React Native\AwesomeProject>react-native link react-native-vector-icons
rnpm-install info Linking react-native-vector-icons android dependency
rnpm-install info Android module react-native-vector-icons has been successfully linked
rnpm-install info Linking react-native-vector-icons ios dependency
rnpm-install info iOS module react-native-vector-icons has been successfully linked
rnpm-install info Linking assets to ios project
rnpm-install WARN ERRGROUP Group 'Resources' does not exist in your XCode project. We have created it automatically for you.
rnpm-install info Linking assets to android project
rnpm-install info Assets have been successfully linked to your project

编辑 3：

我已经从物理设备中删除了该应用程序，然后我重新构建了它（正如 QMFNP 所说）。现在可以了

【问题讨论】：

标签： react-native

【解决方案1】：

首先，确保您通过以下方式在项目中保存依赖项：

npm install react-native-vector-icons --save。包含--save 是必要的，否则react-native link 将无法找到该模块。

在您可以在 iOS 或 Android 项目中使用它们之前，您还必须链接原生模块。执行此操作的快速方法是使用以下命令：

react-native link react-native-vector-icons

如果由于任何原因您在使用 react-native link 链接本机模块时遇到问题，react-native-vector-icons README 还提供了在 Android 和 iOS 上手动链接它们以及在 Web 上集成库的详细说明。

【讨论】：

react-native 链接返回我“错误：找不到模块 'C:\Users\xrobot\Desktop\React Native\AwesomeProject\node_modules\react-native-vector-icons\package.json'”
@xRobot 这是没有保存 react-native-vector-icons 依赖的结果。如果我运行npm install react-native-vector-icons 和react-native link react-native-vector-icons，我能够重现您的错误。为了修复它，您必须确保在您的npm install 末尾包含--save，以便它在您的node_modules 文件夹内创建react-native-vector-icons 文件夹。完整的命令是npm install react-native-vector-icons --save。
@xRobot 我已经更新了我的答案，包括当您在 npm install 命令中不包含 --save 时会发生什么。
如果我包含 --save，我会得到一个错误。请参阅上面已编辑的问题以查看它：)
@xRobot 你可以尝试运行npm cache clean，如下所述：github.com/npm/npm/issues/10826？

【解决方案2】：

这是完整的已更新答案，只需按照以下步骤操作：-

1. npm install react-native-vector-icons --save 2. react-native link 3. react-native link react-native-vector-icons 4. 使用其中之一导入Icon（根据您的要求）

   **MaterialCommunityIcons**

    import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
   **Ionicons**

    import Icon from 'react-native-vector-icons/Ionicons';

   **FontAwesome5**

    import Icon from 'react-native-vector-icons/FontAwesome5';

5. 使用（JSX）

     <Icon size={24} color="white" name="movie" />

【讨论】：

【解决方案3】：

第 1 步：安装 react-native-element:

npm install react-native-elements --save

步骤 2：安装 react-native-vector-icons 从 npm 安装

npm install react-native-vector-icons --save

链接

react-native link react-native-vector-icons

之后，您可以通过以下方式在页面中使用它：第 1 步：

import { Icon } from 'react-native-elements';

第二步：

<Icon name="md-beer" type="ionicon" color="#887700" />

【讨论】：

【解决方案4】：

也许您没有正确导入库，您必须指定您想使用的一系列图标。

我认为您使用的图标名称与您正在搜索的图标不对应。

例如，如果您将使用材质图标，则导入将是： import Icon from 'react-native-vector-icons/MaterialIcons';

并将名称更改为name={add}

如果您不想使用材质图标，请尝试寻找其他图标系列。

【讨论】：

根据他们在尝试运行 react-native link 时遇到的错误，react-native-vector-icons 似乎不存在于 node_modules 文件夹中。

【解决方案5】：

你可以使用：

icon = {"<"Icon name='lock'/>}

或者：

icon = {{ type:'font-awesome',name:'lock'}}

在任何 React 原生组件属性中。

【讨论】：

Giving Icon 组件属性为 icon = {{ type:'font-awesome',name:'lock'}} 似乎不起作用

【解决方案6】：

我认为这可能会有所帮助，至少这是我每次都必须做的。在Project/android/app/build.gradle 中，添加这一行：

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

【讨论】：

【解决方案7】：

按照这一步手册 https://github.com/oblador/react-native-vector-icons#option-manually-1

这可能有助于某些人使用 cmd 安装 react native vector icon 并遵循每个手动步骤，但保留位于 android>app>src>main>java>com>youApplication>mainApplication.java 的 mainApplication.java 如果您运行自动链接命令，请将其注释掉 react-native 链接 react-native-vector-icons //import com.oblador.vectoricons.VectorIconsPackage; // 还不能自动链接的包可以在这里手动添加，例如： // packages.add(new MyReactNativePackage()); // packages.add(new VectorIconsPackage()); 并为我重建你的应用程序，我总共花了 10 多个小时才能找到它

【讨论】：