React-native矢量图标显示为问号[重复]

svdrlsy4  于 6个月前  发布在  React
关注(0)|答案(5)|浏览(103)

此问题在此处已有答案

How to use React Native vector icons?(8个答案)
14天前关门了。
我已经安装了react-native v0.46并安装了NativeBase沿着,但在组件中使用标记后,没有显示图标,而是显示问号(Android和iOS中未测试)。
为了解决这个问题,我做了很多修改,如下所示:
1.第一个月

  1. react-native link react-native-vector-icons
  2. NativeBase安装指南:https://nativebase.io/docs/v0.3.0/getting-started
  3. https://github.com/oblador/react-native-vector-icons
    1.我的json包文件:{ "name": "Magazine", "version": "0.0.1", "private": true, "scripts": { "start": "node node_modules/react-native/local-cli/cli.js start", "test": "jest" }, "dependencies": { "native-base": "^2.3.1", "react": "16.0.0-alpha.12", "react-native": "0.46.4", "react-native-image-slider": "^1.1.5" }, "devDependencies": { "babel-jest": "20.0.3", "babel-preset-react-native": "2.1.0", "jest": "20.0.4", "react-test-renderer": "16.0.0-alpha.12" }, "jest": { "preset": "react-native" } }
    1.以及我使用这些图标的组件:ios-arrow-left & navicon
    我正在使用Windows 10,Node v8.1.4,React-native-CLI v2.0.1
    验证码:
import React, { Component } from 'react';
import {
  AppRegistry,
} from 'react-native';
import {Container, Header, Title, Button, Icon} from 'native-base';

export default class CityMagazine extends Component {
  render() {
    return (
        <Container>
          <Header>
            <Button transparent>
              <Icon name="ios-arrow-left" />
            </Button>

            <Title>Header</Title>

            <Button transparent>
              <Icon name="navicon"/>
            </Button>
          </Header>
        </Container>
    );
  }
}

AppRegistry.registerComponent('CityMagazine', () => CityMagazine);

字符串

4sup72z8

4sup72z81#

矢量图标由许多已知的库组成,因此您可能需要通过设置Icon的type属性来指定您正在使用的库:

<Icon type="EvilIcons" name="navicon"/>

字符串

jw5wzhpr

jw5wzhpr2#

首先检查矢量图标包是否链接或不使用
第一个月
如果链接,则运行命令:
react-native run-android
这个命令将在你的项目中完全安装矢量图标包。
更新:问题是ios-arrow-left不在矢量图标目录中,它的名称现在是ios-arrow-back

jfewjypa

jfewjypa3#

我也遇到过同样的问题,但遵循这些步骤救了我。
注意:在项目根目录中键入所有命令。
1-输入命令:npm install --save react-native-vector-icons安装软件包
2-输入命令:react-native link
3-停止打包服务器并通过npm start再次运行
4-通过命令重建Android版本:npm run android
最后一步将尝试下载react-native-vector-icons所需的一些依赖项,然后你就可以开始了!

1l5u6lss

1l5u6lss4#

我遇到了类似的问题,并按照上面的步骤进行操作。对我来说,让它起作用的是用终端窗口重建pod。在MacOS中,我打开一个终端窗口并运行以下命令:
cd ios(一旦你在你的项目目录)pod install
我刷新了XCode模拟器,瞧!

eanckbw9

eanckbw95#

请确保您使用了正确的图标名称。您可以查看.json文件进行确认,例如MaterialIcons:
https://github.com/oblador/react-native-vector-icons/blob/4b9123212517d4e11b5cec89a81794854f7f326b/glyphmaps/MaterialIcons.json#L54-L56

相关问题