Question

我正在构建一个应用程序，我有一个 react-native图标的问题。这是问题的图像。

enter image description here 我按照这个链接： https://github.com/oblador/react-native-vector-icons#icon-component 然后我确保将字体复制到 android / app / src / main / assets / fonts，删除了android / app / build 夹。最后我重新启动反应原生包，但没有抛好结果如第一。如何解决这个问题？

这是我的代码：

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
    }
})

Answer 1

确保您所使用的图标集（FontAwesome，Ionicons）等所有图标名称都在那里。 “新闻”图标位于Entypo

Answer 2

该问题已通过以下方式为我解决：

react-native link

然后：

react-native run-android

Answer 3

我有一个类似的问题，其中node_modules / react-native-vector-icons / glyphmaps / FontAwesome5Pro.json已过时。我试图从FontAwesome v5.3.1中获取“圣经”图标，但是来自react-native-vector-icons的资源似乎仍然来自5.0。那么“？”正在出现。

我试图npm安装最新版本的react-native-vector-icons，但问题仍然存在。

我从the Github repo手动复制了FontAwesome5Pro.json内容。重新启动模拟器后，问号已成为我要找的图标。

Answer 4

这是因为基于本机的图标有些，而有些图标不存在。

因此，请尝试从其原始模块而非本机库中导入图标

尝试

import Icon from 'react-native-ionicons'

或其他字体库

import Icon from 'react-native-fontawesome'

代替此

import { Icon } from 'native-base'

一些反应原生矢量图标未显示

4 个答案: