一、概述
React Native Vector Icons是一个开源项目,他提供了一种简便的方式来使用矢量图标,其中包含了众多主流的图标库,我们可以轻松的使用它们来使我们的应用图标更加美观。
React Native Vector Icons的矢量图标可以按照App的主题颜色进行渲染,与此相比,位图图标就不能做到这一点。
React Native Vector Icons由oblador、brentvatne、brentvatne等开发,可以从以下地址进行获取:
https://github.com/oblador/react-native-vector-icons
二、安装
React Native Vector Icons可以通过npm和yarn进行安装,具体如下:
npm install react-native-vector-icons --save
或者
yarn add react-native-vector-icons
安装之后,我们应该在native目录下导入该组件:
react-native link react-native-vector-icons
注意,在iOS平台之后,我们还需要运行以下命令:
cd ios
pod install
cd ..
这样我们就可以正常的使用矢量图标了。
三、使用
1、引用全局的Icon组件
我们可以在App.js或是我们项目的入口文件中,引入全局的Icon组件,具体代码如下:
import Icon from 'react-native-vector-icons/FontAwesome';
// ... some code here
function App() {
return (
<Icon name="rocket" size={30} color="#900" />
);
}
在以上代码中,我们引入了FontAwesome的矢量图标,其中的名字为“rocket”,大小为“30”,颜色为"#900"。
2、按需引入
我们可以引入需要的矢量图标,这样可以减少打包的体积。假设我们需要使用FontAwesome的“rocket”图标,具体代码如下:
import FontAwesomeIcon from 'react-native-vector-icons/FontAwesome';
// ... some code here
function MyComponent() {
return (
<FontAwesomeIcon name="rocket" size={30} color="#900" />
);
}
3、自定义图标库
我们还可以添加自己的图标库至react-native-vector-icons中,以便按需使用。假设我们需要添加一个名为myIcon的图标库,具体代码如下:
// ... some code here
import { createIconSetFromIcoMoon } from 'react-native-vector-icons';
import icoMoonConfig from '../path/to/selection.json';
const MyIcon = createIconSetFromIcoMoon(icoMoonConfig, 'MyIcon');
function MyComponent() {
return (
<MyIcon name="rocket" size={30} color="#900" />
);
}
四、常用属性
以下是我们在使用React Native Vector Icons时常见的Props:
- name:矢量图标的名字。
- size:矢量图标的大小。
- color:矢量图标的颜色。
- style:矢量图标的样式。
五、总结
React Native Vector Icons给我们提供了一种便利的方式来使用各种主流矢量图标,可以让我们的应用更加美观。此外,React Native Vector Icons还具有一些灵活的引入方式,可以让我们减少应用的体积。
如果您还没有使用React Native Vector Icons,建议您尝试一下他的魅力,将会给您的App带来无穷的美感。