此问题在此处已有答案:
How to use React Native vector icons?(8个答案)
14天前关门了。
我已经安装了react-native v0.46并安装了NativeBase沿着,但在组件中使用标记后,没有显示图标,而是显示问号(Android和iOS中未测试)。
为了解决这个问题,我做了很多修改,如下所示:
1.第一个月
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的
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);
字符串
5条答案
按热度按时间4sup72z81#
矢量图标由许多已知的库组成,因此您可能需要通过设置Icon的type属性来指定您正在使用的库:
字符串
jw5wzhpr2#
首先检查矢量图标包是否链接或不使用
第一个月
如果链接,则运行命令:
react-native run-android
个这个命令将在你的项目中完全安装矢量图标包。
更新:问题是
ios-arrow-left
不在矢量图标目录中,它的名称现在是ios-arrow-back
。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所需的一些依赖项,然后你就可以开始了!
1l5u6lss4#
我遇到了类似的问题,并按照上面的步骤进行操作。对我来说,让它起作用的是用终端窗口重建pod。在MacOS中,我打开一个终端窗口并运行以下命令:
cd ios(一旦你在你的项目目录)pod install
我刷新了XCode模拟器,瞧!
eanckbw95#
请确保您使用了正确的图标名称。您可以查看.json文件进行确认,例如MaterialIcons:
https://github.com/oblador/react-native-vector-icons/blob/4b9123212517d4e11b5cec89a81794854f7f326b/glyphmaps/MaterialIcons.json#L54-L56