如何使用 React Native 矢量图标? [英] How to use React Native vector icons?

问题描述

我刚刚用这个命令安装了

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

react-native link react-native-vector-icons

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

I have just installed React Native vector icons with this comand:

npm install react-native-vector-icons

But if I use it in the index.android.js

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

I get a square with a X in the center instead of the icon.

Why ?

EDIT:

If I try to install it with "npm install react-native-vector-icons --save", then I get this error:

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

EDIT 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

EDIT 3:

I have removed the app from the physical device and then I re-build it ( as QMFNP said ). Now it works

解决方案

First, make sure you're saving the dependency in your project by doing:

npm install react-native-vector-icons --save. Including the --save is necessary, otherwise react-native link won't be able to locate the module.

Before you can use them in your iOS or Android project, you also have to link the native modules. The quick way to do this is by using the following command:

react-native link react-native-vector-icons

If for any reason you have problems using react-native link to link the native modules, the react-native-vector-icons README also provides detailed instructions for linking them manually on Android and iOS, and integrating the library on the web as well.

这篇关于如何使用 React Native 矢量图标?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！