react-native-vector-icons图标显示不正确

Zero
  • 107

我用npm 装了react-native-vector-icons,也按照网上说的配置了各种文件,但是不知道为什么图标老是显示问号,求各位不吝赐教哈,这几天才学习react-native。

import React, { Component } from 'react';
import {
     AppRegistry,
     StyleSheet,
     Text,
     View,
     Image
} from 'react-native';
import Icon from 'react-native-vector-icons/FontAwesome';
export  default class Home extends Component{
     render(){
         return(
             <Text><Icon  name="add-user" size={30} color="#52C0FE"/></Text>
         )
     }
 }

用的是官网对应图标的名字,但是运行出来只是问号,还有一堆警告。

clipboard.png

回复
阅读 9.2k
6 个回答
✓ 已被采纳

要使用字体库的字体,除了执行npm install react-native-vector-icons --save 之外,还需要再Android与iOS工程里面进行相应的配置,Android的话需要在 android/app/build.gradle 中添加:apply from: "../../node_modules/react-native-vector-icons/fonts.gradle"
iOS配置参照官网:https://www.npmjs.com/package...

FontAwesome库中没有add-user,找对应库的图标

@Zero 你好您解决这个问题了么,我也遇到了同样问题,我开始显示的是问号,这是因为,我们的字体名字设置的不是官方提供的,但是当我设置好官方提供的名字的时候字体图片同样的是显示不出来,根据google的帮助说,将字体文件放置到android中的assets目录中,或者是配置好gradle文件,但是都是不起作用的...您最后能够显示么

夕叩
  • 1
新手上路,请多包涵

这个是名字不对吧

安筱语
  • 11

安卓配置
1.android/app/build.gradle 中添加
apply from: "../../node_modules/react-native-vector-icons/fonts.gradle"

2.从react-native-vector-icons 复制你需要的字体文件
到android/app/src/main/assets/fonts/ 下

洛竹
  • 5
新手上路,请多包涵

Android

1、使用Gradle管理(强烈推荐)

编辑 android/app/build.gradle ( NOT android/build.gradle ) 并添加下面的代码:

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

定制你想要复制的字体文件,请使用下面的配置代替:

project.ext.vectoricons = [
  iconFontNames: [ 'MaterialIcons.ttf', 'EvilIcons.ttf' ] // 你想要复制的字体文件的名字
]
apply from: "../../node_modules/react-native-vector-icons/fonts.gradle"

2、手动管理

复制 Fonts folder 文件夹下的内容 到 android/app/src/main/assets/fonts (注意是小写的文件夹名)

宣传栏