如何使用React Native矢量图标？

Question

我刚用这个命令安装了React Native矢量图标:

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所说).现在它有效

Answer 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上集成库的详细说明.

Answer 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" />

Answer 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';

第2步：

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

Answer 4

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

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

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

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

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