Question

我已经安装了react-native v0.46并安装了NativeBase但是在组件中使用标签后，没有显示图标而是显示问号（Android并未在iOS中测试）。

为了解决这个问题，我做了很多修改，如下所示：

rnpm link
react-native link react-native-vector-icons
NativeBase安装指南：https://nativebase.io/docs/v0.3.0/getting-started
https://github.com/oblador/react-native-vector-icons
我的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" } }
我使用这些图标的组件：ios-arrow-left＆amp; 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);

Answer 1

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

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

Answer 2

首先使用

检查矢量图标包是否已链接

react-native link react-native-vector-icons

如果已链接，请运行命令：

react-native run-android

此命令将在项目中完全安装矢量图标包。

更新：问题是ios-arrow-left不在矢量图标目录中，其名称现在为ios-arrow-back。

Answer 3

我遇到了同样的问题，但按照这些步骤救了我。

注意：键入项目根目录中的所有命令。

1-输入命令：npm install --save react-native-vector-icons安装包

2-输入命令：react-native link

3-停止打包服务器并再次运行：npm start

4-按命令重建android版本：npm run android

最后一步将尝试下载react-native-vector-icons所需的一些依赖项，你就可以了！

Answer 4

我遇到了类似的问题，并按照上述步骤操作。对我来说起作用的是用终端窗口重建吊舱。在MacOS中，我打开了一个终端窗口并运行以下命令：

cd ios（一旦您在项目目录中）吊舱安装

我刷新了XCode模拟器，瞧！

Answer 5

确保您使用正确的图标名称。您可以查看 .json 文件进行确认，例如 MaterialIcons：

https://github.com/oblador/react-native-vector-icons/blob/4b9123212517d4e11b5cec89a81794854f7f326b/glyphmaps/MaterialIcons.json#L54-L56

作为问号显示的反应当地传染媒介象

5 个答案: