一些反应原生矢量图标未显示
[英]Some react-native vector icons are not shown
问题描述
I'm building an application and I have a problem with react-native icon.
我正在构建一个应用程序，但我遇到了 react-native 图标的问题。 This is an image of the problem.这是问题的形象。
I followed this link and then I made sure the font is copied to android/app/src/main/assets/fonts, deleted the android/app/build folder.我点击了这个链接，然后我确保将字体复制到 android/app/src/main/assets/fonts，删除了 android/app/build 文件夹。 Finally I restarted react native package, but not throwing good result it such as first.最后我重新启动了 react native 包，但没有像第一次那样抛出好的结果。 How to fix this problem?如何解决这个问题？
This is my code:这是我的代码：
import React, { Component } from 'react';
import { Image, StyleSheet, View } from 'react-native';
import { Container, Header, Content, Card, CardItem, Right, Left, Thumbnail, Body, Text, Button, Icon } from 'native-base';
export default class SideMenu extends Component {
render() {
return (
<Container style={{ flex:1, backgroundColor:'#fcfcfc' }}>
<Content>
<Body style={{ justifyContent: 'center' }}>
<Image style={{ position: 'relative'}} source={require('../../../image/imac.jpg')}/>
<View style={bao.cover}>
<Thumbnail square source={require('../../../image/ava.jpg')} style={{borderRadius:40}}/>
<Text style={{ color:'#fff', flex:1, lineHeight:40, fontSize:18 }}> Vu Nguyen </Text>
</View>
</Body>
<Card>
<CardItem>
<Icon name="home" />
<Text>Home</Text>
</CardItem>
<CardItem>
<Icon name="news" />
<Text>Home</Text>
</CardItem>
</Card>
</Content>
</Container>
);
}
}
const bao = StyleSheet.create({
cover:{
position:'absolute',
flex: 1,
flexDirection: 'row',
marginLeft:30,
top: 170
}
})
6 个解决方案
解决方案1
0 2017-03-26 06:40:18
确保你所使用的任何图标集中都有你的图标名称（FontAwesome，Ionicons）等。“新闻”图标在Entypo中可用
解决方案2
0 2018-09-18 13:09:49
The issue was solved for me by: 这个问题通过以下方式解决了我：
react-native link
and then: 接着：
react-native run-android
解决方案3
0 2018-09-26 01:40:41
I had a similar problem where the node_modules/react-native-vector-icons/glyphmaps/FontAwesome5Pro.json was outdated. 我有一个类似的问题，node_modules / react-native-vector-icons / glyphmaps / FontAwesome5Pro.json已经过时了。 I was trying to get the "bible" icon from FontAwesome v5.3.1, however resources from react-native-vector-icons still seem to be from 5.0. 我试图从FontAwesome v5.3.1获取“圣经”图标，但来自react-native-vector-icons的资源似乎仍然来自5.0。 So a "?" 那么一个“？” was appearing. 出现了。
I tried to npm install the latest version of react-native-vector-icons, but the problem persisted. 我尝试npm安装最新版本的react-native-vector-icons，但问题仍然存在。
I manually copied the FontAwesome5Pro.json content from the Github repo . 我从Github仓库手动复制了FontAwesome5Pro.json内容。 After restarting my simulator the question marks had become the icons I was looking for. 重新启动我的模拟器后，问号已成为我正在寻找的图标。
解决方案4
0 2019-07-15 12:44:24
it's because native-base have some icons and some are not present. 这是因为原生基地有一些图标，有些不存在。
so try to import the icon from it's original module instead of native-base 所以尝试从它的原始模块而不是本机模块导入图标
try this 尝试这个
import Icon from 'react-native-ionicons'
or other font libraries 或其他字体库
import Icon from 'react-native-fontawesome'
instead of this 而不是这个
import { Icon } from 'native-base'
解决方案5
0 2022-07-23 08:21:44
If anyone is facing this issue please paste this line in your app/build.gradle and re-run the project.如果有人遇到此问题，请将此行粘贴到您的 app/build.gradle 中并重新运行该项目。
apply from: "../../node_modules/react-native-vector-icons/fonts.gradle"申请自：“../../node_modules/react-native-vector-icons/fonts.gradle”
解决方案6
0 2022-07-23 11:26:19
尝试这个
react-native link react-native-vector-icons
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.