一.使用react-native-vector-icons的图标库

1.切换好工程目录,安装图标库

⚠️:目前npm5存在安装新库时会删除其他库的问题,可能后面会修复导致项目无法正常运行。请尽量使用yarn代替npm操作。

  1. npm install react-native-vector-icons --save
  2. 或者
  3. yarn add react-native-vector-icons

2.使用图标

图标库地址:https://oblador.github.io/react-native-vector-icons/
⚠️:在同一个页面引入不同的模块,需要换不同的引入名称

  1. 引入的时候只需要在react-native-vector-icons后对应的模块名就行了
  2. import Icon from 'react-native-vector-icons/FontAwesome';
  3. 如引入
  4. import Icon from 'react-native-vector-icons/FontAwesome';
  5. import Icon2 from 'react-native-vector-icons/Entypo';

在DOM中添加icon就可以了

  1. <Icon name="thumbs-o-up" size={24} style={{ marginRight: 20 }} />

二.使用expo的icon库
iOS图标库地址:https://infinitered.github.io/ionicons-version-3-search/
Android图标库地址:http://zavoloklom.github.io/material-design-iconic-font/v1/icons.html