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

时间:2017-07-30 02:15:02

标签: android react-native

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

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

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

5 个答案:

答案 0 :(得分:5)

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

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

答案 1 :(得分:3)

首先使用

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

react-native link react-native-vector-icons

如果已链接,请运行命令:

react-native run-android

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

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

答案 2 :(得分:1)

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

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

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

2-输入命令:react-native link

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

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

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

答案 3 :(得分:0)

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

cd ios(一旦您在项目目录中) 吊舱安装

我刷新了XCode模拟器,瞧!

答案 4 :(得分:0)

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

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