图标基于react-native-elements和react-native-vector-icons库

yarn add react-native-elements
yarn add react-native-vector-icons

也可以使用npm下载

下载自己所需的阿里字体图标库

ios配置

1. 在项目ios目录里创建fonts目录，把字体图标库解压的文件方入fonts目录里
2. 在ios目录找到和项目名同名的目录，在其里面打开info.plist文件，然后在其内部添加以下目录

<array>
      <string></string>
      <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>
      <string>FontAwesome5_Regular.ttf</string>
      <string>FontAwesome5_Solid.ttf</string>
      <string>Foundation.ttf</string>
      <string>Ionicons.ttf</string>
      <string>iconfont.ttf</string>
      <string>MaterialIcons.ttf</string>
      <string>MaterialCommunityIcons.ttf</string>
      <string>SimpleLineIcons.ttf</string>
      <string>Octicons.ttf</string>
      <string>Zocial.ttf</string>
  </array>

3. 项目目录下新建src/tool/fonts，将解压的字体文件放到fonts目录下
   • 需要对fonts/iconfont.json文件的内容进行修改(通过下面2,3步骤进行修改)
   • 新建src/tool/fonts/iconfont_mapper.sh文件，内容如下

#!/bin/sh

if [ $# != 1 ] ; then

    echo "usage: $0 iconfont.svg(your svg file name)  "
    exit
fi

#OutputFile path,you can customize your path
OutputFileName=`echo iconfont.json`

mapper=` awk '{ if($0 ~ /glyph-name/) print $0;  if($0 ~ /unicode/)  print $0"|split|" }'  $1| tr '[:upper:]' '[:lower:]'| awk '{print $0}'  RS='\='| tr "\n\"&#;" " "| awk  '{ if ($1!="split"&&$1!=""){ printf ("\""$3"\":"); printf ($5","); print "\r " }}' RS="|split|" | sed "s/-/_/g"`

rm $OutputFileName
echo "{" >> $OutputFileName
echo $mapper >> $OutputFileName
echo "}" >> $OutputFileName

#usage:
# ./iconfont_mapper.sh svg_file_path

• 打开fonts的终端执行 ./iconfont_mapper.sh iconfont.svg
• 新建src/tool/mIcon.js,内容如下

import createIconSet from 'react-native-vector-icons/lib/create-icon-set';
import glyphMap from './fonts/iconfont.json';

const Icon = createIconSet(glyphMap, "iconfont", 'iconfont.ttf');
export default Icon;

然后在需要使用的页面引入mIcon.js

import Icon from '../tool/mIcon';
//name的值和src/tool/fonts/iconfont.json文件的键保持一致
 <Icon
     name='xiazai'     
     size={30}
     color={'red'}
 />

android配置

安卓下会从android/app/src/main/assets/fonts目录读取字体文件，所以我们需要把字体文件*.ttf放在这个目录下，然后在android/app/build.gradle文件中按需增加下面的配置。

//使用内置的iconSets
apply from: "../../node_modules/react-native-vector-icons/fonts.gradle"
//使用自定义iconSets
project.ext.vectoricons = [
   iconFontNames: [ 'iconfont.ttf'] // Name of the font files you want to copy
]