使用React Native开发移动App时,经常会遇到矢量图和自定义字体的开发需求,使用矢量图可以有效的减少包体积的大小。在React Native开发中,可以使用react-native-vector-icons来满足开发需求。
和其他的第三方库一样,使用第三方库之前需要先安装react-native-vector-icons。
npm install --save react-native-vector-icons
然后,在使用link命令添加原生库链接。
react-native link react-native-vector-icons
首先,在RN的 ios 目录下执行 pod install命令安装依赖包。
cd ios && pod install
然后,在Xcode项目中创建一个新的字体组取名为Fonts,从 ./node_modules/react-native-vector-icons/Fonts
将需要的字体拷贝进去。
打开Xcode,使用源代码模式编辑 info.plist 文件,如下图。
然后,将字体的配置加入进去,如下所示。
<key>UIAppFonts</key>
<array>
<string>AntDesign.ttf</string>
<string>Entypo.ttf</string>
<string>EvilIcons.ttf</string>
<string>Feather.ttf</string>
<string>FontAwesome.ttf</string>
<string>FontAwesome5_Brands.ttf</string>
...
</array>
使用Xcode编译一下iOS项目,如果没有任何错误就说明配置好了。
和 iOS 一样,Android原生端也需要进行一些配置才能正常使用。首先,将node-modeles\react-native-vector-icons\Fonts
目录下文件复制到项目andriod\app\src\main\assets\fonts
目录下。
然后,打开andriod/app/build.gradle
文件,增加如下代码。
apply from: "../../node_modules/react-native-vector-icons/fonts.gradle"
重新编译Android工程,如果没有任何错误,说明配置好了。
原生端配置完成之后,接下来就可以直接使用了,如下所示。
import Icon from 'react-native-vector-icons/FontAwesome';
<Icon name="rocket" size={30} color="#900" />
我们在网页中经常需要控制一些元素的隐藏、透明等属性 style .d1{ display: none...
Gird布局与Flex布局有一定的相似性,都是对容器的内部项目进行划分。 Flex布局是...
实现功能: 将桌面图片拖入指定地方,生成相框和相关信息。 相框需要自己配置,...
前言 何为插件(Plugin)?专注处理 webpack 在编译过程中的某个特定的任务的功能...
在使用dreamweaver或者frontpage来制作HTML网页时,我们有可能会遇到这样的问题...
作者:小傅哥 博客: https://bugstack.cn 沉淀、分享、成长,让自己和他人都能...
突然想到的方法,来试试吧 1.页面布局 canvas id=canva width=500px height=300p...
1.我向你夸下海口,心为你滴成琥珀,冷却以后,千万年后爱通透依旧。 2.一朝春...
需求催动此篇博客的诞生 项目背景 之前也没写过小程序但是看过之后都是现成的api...
序号 中文说明 标记语法 备注 1 背景颜色 {background-color:数值} 2 背景图片 {...