如何使用React Native矢量图标？

xbp102n0 于 12个月前发布在 React

关注(0)|答案(8)|浏览(154)

我刚刚安装了React Native vector icons与此comand：

npm install react-native-vector-icons

字符串
但如果我在index.android.js中使用它，

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

型
我得到一个中心有X的正方形，而不是图标。
为什么？为什么？
编辑：
如果我尝试使用“npm install react-native-vector-icons --保存”安装它，那么我会得到这个错误：

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
    [email protected] C:\Users\xrobot\Desktop\React Native\AwesomeProject
    `-- [email protected]

型
编辑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

来源：https://stackoverflow.com/questions/42420931/how-to-use-react-native-vector-icons

8条答案

按热度按时间

hzbexzde1#

首先，确保您正在通过执行以下操作来保存项目中的依赖项：
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-iconsREADME还提供了在Android和iOS上手动链接它们以及在Web上集成库的详细说明。

赞(0）回复(0）举报 12个月前

2ul0zpep2#

这里是完整的验证答案，只需按照这些步骤：-

1.npm install react-native-vector-icons --save2.react-native link3.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" />

型

赞(0）回复(0）举报 12个月前

lzfw57am3#

步骤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" />

型

赞(0）回复(0）举报 12个月前

kulphzqa4#

也许你没有正确导入库，你必须指定一个你想要使用的图标系列。
我认为你正在使用的图标的名称不符合你正在搜索的图标。
例如，如果您将使用材质图标，则导入将为：import Icon from 'react-native-vector-icons/MaterialIcons';
并将名称更改为name={add}
如果你不想使用材质图标，试着寻找其他的图标家族。

赞(0）回复(0）举报 12个月前

gcmastyq5#

您可以用途：

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

字符串
或者：

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

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

赞(0）回复(0）举报 12个月前

smdnsysy6#

我想这可能会有帮助，至少这是我每次都要做的。在Project/android/app/build.gradle中，添加这行：

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

字符串

赞(0）回复(0）举报 12个月前

mbzjlibv7#

按照此步骤操作手册https://github.com/oblador/react-native-vector-icons#option-manually-1
这可能有助于一些人安装react native vector icon with cmd并遵循每个手动步骤，但mainApplication.java如果您运行自动链接命令react-native link react-native-vector-icons //import com.oblador.vectoricons.VectorIconsPackage; //无法自动链接的软件包可以手动添加到此处，例如：// packages.add，请将www.example.com（位于android>app>src>main>java>com>youApplication>mainApplication.java）注解掉（new MyReactNativePackage（））; // packages.add（new VectorIconsPackage（））;并重建您的应用程序这项工作对我来说，我能够找到它在总共超过10小时

赞(0）回复(0）举报 12个月前

xiozqbni8#

与根本原因相同的问题可能是这些字体文件没有复制到RN使用的正确位置。
我遵循了这里列出的步骤：https://aboutreact.com/react-native-vector-icons/适合我，而npm link解决方案不适合我。
我的env如下，

npm：10.2.0
节点：v21.1.0
操作系统：macOS Ventura
xcode：15.0.1

我的步骤如下，

npm install react-native-vector-icons --save个
npx pod-install或cd iOS && pd install
iOS中的图标文件
1.在ios中创建一个fonts目录，并将node_modules/react-native-vector-icons/Fonts中的所有字体文件复制到其中
1.现在在Xcode中打开项目YourProject-> ios-> YourProject.xcworkspace。
1.在Xcode中打开项目后，从左侧边栏单击项目以打开选项，然后选择Add Files to“YourProjectName”
1.选择您创建的fonts目录。请记住从下面选择Create Folder references并单击Add
1.编辑info.plist并添加字体配置

<key>UIAppFonts</key>
<array>
    <string>fonts/FontAwesome.ttf</string>
    <string>fonts/Ionicons.ttf</string>
    <string>fonts/Foundation.ttf</string>
    <string>fonts/MaterialCommunityIcons.ttf</string>
    <string>fonts/MaterialIcons.ttf</string>
</array>

字符串
然后打开构建CLI，您应该可以看到图标。

赞(0）回复(0）举报 12个月前

我来回答

如何使用React Native矢量图标？

8条答案

相关问题

热门标签

最新问答