我已经安装了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://nativebase.io/docs/v0.3.0/getting-started
- https://github.com/oblador/react-native-vector-icons 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 和 navicon
我使用的是 Windows 10、Node v8.1.4、React-native-CLI v2.0.1
code:
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);
众所周知,矢量图标由许多库组成,因此您可能需要通过设置 Icon 的 type 属性来指定正在使用哪个库,如下所示:
<Icon type="EvilIcons" name="navicon"/>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)