ReactNative 使用矢量图标 react-native-vector-icons
一、概述
矢量图标的好处是:可以自定义图标大小,颜色,这样解决了指定死图标的灵活性。但是跨平台应用开发中,ReactNative不像Ionic那样自带矢量图标,针对这问题,引出RN插件 react-native-vector-icons。
GitHub地址:https://github.com/oblador/react-native-vector-icons
废话不多说开始配置。
二、安装
2.1 插件安装
$ yarn add react-native-vector-icons (或者:$ npm install react-native-vector-icons --save)
$react-native link react-native-vector-icons
2.2 IOS 的配置
2.2.1 拖拽路径 node_modules/react-native-vector-icons/Fonts 文件夹到Xcode项目中(拖拽后的结果如图:2.2.1)
图 2.2.1 拖拽文档
2.2.2 检查Info.plist中是否存在添加的Font列表(图2.2.2)
图 2.2.2 确定文件
至此,IOS的配置完成。
2.3 Android的配置
其实不需要操作太多,当你安装插件的时候就已经给你添加进去了。前往图2.3路径中确定是否存在font文件。
图 2.3
三、使用教程
介绍
当你 https://oblador.github.io/react-native-vector-icons/ 打开该路径时,搜索相应的图标会出现对应的名字,图3.1.1
图 3.1.1
然后导入你需要使用图标的名字(此处以FontAwesome)为例
import FontAwesome from 'react-native-vector-icons/FontAwesome';
开始使用
<View style={{marginTop:10}}> <FontAwesome.Button name="facebook" backgroundColor="#3b5998"> <Text style={{fontFamily: 'Arial', fontSize: 15}}>Login with Facebook</Text> </FontAwesome.Button><<span style="color:#e3e3ff;"><strong>FontAwesome </strong></span><span style="color:#99cc99;"><em>name</em></span><span style="color:#66ff00;">='user-circle-o' </span><span style="color:#99cc99;"><em>size</em></span><span style="color:#66ff00;">=</span>{<span style="color:#339999;">20</span>}/> <<span style="color:#e3e3ff;"><strong>FontAwesome </strong></span><span style="color:#99cc99;"><em>name</em></span><span style="color:#66ff00;">='user' </span><span style="color:#99cc99;"><em>size</em></span><span style="color:#66ff00;">=</span>{<span style="color:#339999;">20</span>} <span style="color:#99cc99;"><em>color</em></span><span style="color:#66ff00;">=</span>{<span style="color:#66ff00;"><strong>'#00ff00'</strong></span>}/> <<span style="color:#e3e3ff;"><strong>FontAwesome </strong></span><span style="color:#99cc99;"><em>name</em></span><span style="color:#66ff00;">="rocket" </span><span style="color:#99cc99;"><em>size</em></span><span style="color:#66ff00;">=</span>{<span style="color:#339999;">30</span>} <span style="color:#99cc99;"><em>color</em></span><span style="color:#66ff00;">="#900" </span>/> <<span style="color:#e3e3ff;"><strong>Text</strong></span>><span style="font-weight:bold;">图标展示</span><<span style="color:#e3e3ff;"><strong>FontAwesome </strong></span><span style="color:#99cc99;"><em>name</em></span><span style="color:#66ff00;">=</span>{<span style="color:#66ff00;"><strong>'facebook'</strong></span>} <span style="color:#99cc99;"><em>color</em></span><span style="color:#66ff00;">=</span>{<span style="color:#66ff00;"><strong>'red'</strong></span>} <span style="color:#99cc99;"><em>size</em></span><span style="color:#66ff00;">=</span>{<span style="color:#339999;">20</span>}/></<span style="color:#e3e3ff;"><strong>Text</strong></span>>
</View> 效果展示(图3.1.2)
图 3.1.2
组件介绍:
Icon 组件(FontAwesome相当于Icon)
属性
样式
Icon.Button 组件(FontAwesome.Button)
四、写在后面的话
对于学习ReactNative,我想说其功能行还是挺强大的。随着框架的完善和第三方插件的完善,我相信会越走越好。欢迎大家进入讨论群:597910835。共同学习共同成长。