react-native-vector-icons自定义图库

2018-09-07

react-native-vector-icons安装

react-native图标库，使用起来简单高效，其中内置市面上大部分开源的图标库。react-native-vector-icons地址

//安装
npm install --save react-native-vector-icons

//link到原生
react-native link react-native-vector-icons

使用阿里矢量图标库iconfont的使用

字体图库的优点:

基于Text组件来显示，加载速度快
可以设置字体样式来改变图标的大小，颜色
矢量图标，放大缩小不失真
兼容性好，适用于各式浏览器
设计简单，图标库丰富，如FontAwesome，iconfont
最重要的一点，不会像图片那样由于一点小小的改动就换来换去，我们直接修改字体样式就行了

上传或者寻找icon

使用阿里的图标库http://iconfont.cn/
选好自己的icon，添加到项目，下载至本地

这里有一点要注意，必须是svg图

下载后的文件目录，包含这些文件

iconfont.ttf 是要使用的字体图库
iconfont.svg 用来生成json

由于使用的时候，iconfont的字体都是16进制的，为了使用方便，我们把16进制的转成10进制，映射生成json或者js文件

1	<Icon name = "图片名" />

这里采用脚本生成js
iconfont_mapper.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

只需要拷贝下来脚本源码，后缀为.sh
使用的时候，你想要json生成在什么地方就cd到什么地方，比如cd desktop，然后在终端先拖进脚本文件然后再拖进上面生成的svg文件,就会在桌面生成json文件

mac下如果报错Permission denied就先修改文件权限

1	chmod 777 iconfont_mapper.sh

生成的json文件是这样

{
     "fasong":58908,  
     "jinlingyingcaiwangtubiao97":59270,
     "xiaojiantou":58904,
     "xiaojiantou1":58892,
     "cha":58917,
     "iconset0121":58900,
     "lajixiang_copy":58991,
     "cha1":58973,
     "youjian":58952,
     "caogaoxiang":58881,
     "yidong":58920
     }

数字就是图片16进制转成对应的10进制，图片名不太好对应就去网站，选择Font class复制代码后，去调icon-前缀

使用就是这样

1	<Icon name = 'caogaoxiang'>

项目中使用

android端的配置

执行react-native link命令后,Android目录下这个库已经自动为把字体文件引入到app/src/main中并创建了assets/fonts的目录

如果不小心手动改过，一定要记得安卓的目录必须是小写的font，不然会出现图片找不到

在android/app/build.gradle文件添加

//图标引入 Iconfont.ttf 就是在iconfont.cn站生成的字体图库文件

project.ext.vectoricons = [
    iconFontNames: [ 'Iconfont.ttf' ] // Name of the font files you want to copy
]

// 如果只是使用react-native-vector-icons中自带的图库，只添加下面这行就行了，上面那段配置可以不写
apply from: "../../node_modules/react-native-vector-icons/fonts.gradle"

配置 android/settings.gradle

1 2	include ':react-native-vector-icons' project(':react-native-vector-icons').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-vector-icons/android')

配置android/app/build.gradle

ependencies {
    compile project(':react-native-vector-icons') //添加
    compile fileTree(dir: "libs", include: ["*.jar"])
    compile "com.android.support:appcompat-v7:23.0.1"
    compile "com.facebook.react:react-native:+"  // From node_modules
    compile project(':react-native-navigation')
}

配置 android/app/src/main/java/com/xxxx/MainApplication.java

@Override
 protected List<ReactPackage> getPackages() {
   return Arrays.<ReactPackage>asList(
       new MainReactPackage(),
         new VectorIconsPackage(),
         new SplashScreenReactPackage(),
       // 国际化
       new RNI18nPackage()
   );
 }

如果多次操作会有导入的库重复，android会报如下类似的错

iOS端的配置

xcode检查有没有把库链接进去
运行react-native link命令后iOS工程目录下info.plist文件中多了一行Fonts provided by application，也可以手动配置，需要手动把react-native-vector-icons中所有字体全部加进来，如下：
需要把自己生成的iconfont.ttf拖进项目不然会报这个错

在项目根目录下把iconfont.ttf拖进来，必须是项目真实的font文件夹，在xcode中new group建的文件夹不得行（new group夹的文件夹在finder中不会生成对应的文件夹，只是xcode的文件目录形式,
RN代码实现
创建代码实现文件

index.js 实现的代码

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

// glyphMap, fontFamily, fontFile三个参数，注意看react-native-vector-icons官方文档中方法注释，
// Android中fontFamily可以随便写，iOS必须是正确的名字否则运行报错，iOS可以直接双击iconfont.ttf打开看字体实际叫什么名字
const iconSet = createIconSet(glyphMap, 'iconfont', 'Iconfont.ttf');

export default iconSet;

export const Button = iconSet.Button;
export const TabBarItem = iconSet.TabBarItem;
export const TabBarItemIOS = iconSet.TabBarItemIOS;
export const ToolbarAndroid = iconSet.ToolbarAndroid;
export const getImageSource = iconSet.getImageSource;

使用
自动的字体图库

1
2
3

import Icon from '../utils/Icon';
       
<Icon name="youjianxinxi"   size = {30}/>

使用组件自带的库
如果同时使用几个资源库图标如FontAwesome、Ionicons、Feather等作为Icon组件引用，为了避免Icon组件名称混淆，在import的时候可以起不同的名字，使用的时候组件名对应import的名称就行。

import FontAwesomeIcon from 'react-native-vector-icons/FontAwesome';
import Icon from 'react-native-vector-icons/Ionicons';

<FontAwesomeIcon name={'angle-right'} size={24} color={'#999'}/>

<Icon name={'ios-sad'} size={100} color={'#999999'}/>

用作Button组件

import Icon from 'react-native-vector-icons/FontAwesome';

<Icon.Button name="star" backgroundColor="#999999" onPress={this.press}>
button的名字
</Icon.Button>

用作静态的图片资源
有时候我们可能不想用图标组件，而想使用Image组件来显示这些字体图标：

import Icon from 'react-native-vector-icons/FontAwesome';

constructor(props) {
    super(props);
    this.state = {
      userIcon: null,
    };
}

componentWillMount() {
//获取字体图库的ttf中的icon资源，名字是user，大小50
    Icon.getImageSource('user', 50, '#999').then((source) => {
      this.setState({
        userIcon: source
      })
    });
  }

先在state中声明一个userIcon，然后使用Icon组件的getImageSource方法获取图标资源赋值给userIcon，接着在render函数中需要用到Image组件的地方设置这个userIcon。

1	<Image source={this.state.userIcon}/>

以下觉得写得不错，无脑复制

配合TabBarIOS组件使用

import Icon from 'react-native-vector-icons/Ionicons';

<Icon.TabBarItemIOS
    title={'Home'}
    iconName={'ios-home-outline'}
    selectedIconName={'ios-home'}
    iconColor={'#888'}
    selectedIconColor={'#ff0098'}
    selected={this.state.selectedTabIndex === 0}
    renderAsOriginal
    onPress={() => {
        this.setState({
            selectedTabIndex: 0
        })
    }}
>

在NavigatorIOS组件中使用
NavigatorIOS是iOS专属组件，字体图标在这里主要是使用在NavigationBar上，使用方式与上面说到的第3点静态图片资源的使用是一样的，这里不多作赘述。有一点需要注意的是NavigatorIOS不会随着state中属性值改变而重新渲染，所以可能导致getImageSource之后NavigationBar上的图标不显示，这里请看看react-native-vector-icons的官方文档，很贴心的说明了避坑指南：

Note: Since NavigatorIOS doesn't rerender with new state and the async nature of getImageSource you must not use it with initialRoute until the icon is rendered, but any view added by push should be fine. Easiest way is to simple add an if statment at the beginning of you render method like this:

render() {
    if (!this.state.myIcon) {
      return false;
    }
    return (<NavigatorIOS ... />);
  }

简而言之，就是取值之前加个判断…

在ToolbarAndroid组件中使用
两种方式，一种是获取Icon组件的静态图片资源，用在原生的ToolbarAndroid组件中，一种是使用Icon.ToolbarAndroid组件。

import Icon from 'react-native-vector-icons/FontAwesome';

constructor(props) {
    super(props);
    this.state = {
      appLogo: null,
    };
  }
  
componentWillMount() {
    Icon.getImageSource('android', 36, '#92c029').then((source) => {
      this.setState({
        appLogo: source
      })
    });
}
  
render() {
    return (
      <View style={styles.container}>
        <ToolbarAndroid
          style={styles.toolbar_system}
          logo={this.state.appLogo}
          title={'This is an android toolbar'}
        />
        <Icon.ToolbarAndroid
          navIconName={'amazon'}
          style={styles.toolbar_iconfont}
          titleColor="white"
          title={'This is an Icon toolbar'}
        />
      </View>
    )  }

参考：
ReactNative干货分享——自定义iconfont图标的使用
 eact-native 填坑之canOverrideExistingModule=true
react-native-vector-icons进阶教程（自定义iconfont使用)
React Native 开发报错： unrecognized font family 字体包名字

ibamboo

react-native-vector-icons自定义图库

react-native-vector-icons安装

使用阿里矢量图标库iconfont的使用

上传或者寻找icon

mac下如果报错Permission denied就先修改文件权限

项目中使用

android端的配置

执行`react-native link`命令后,Android目录下这个库已经自动为把字体文件引入到`app/src/main`中并创建了`assets/fonts`的目录

在`android/app/build.gradle`文件添加

配置 android/settings.gradle

配置android/app/build.gradle

配置 android/app/src/main/java/com/xxxx/MainApplication.java

iOS端的配置

xcode检查有没有把库链接进去

运行`react-native link`命令后iOS工程目录下`info.plist`文件中多了一行`Fonts provided by application`，也可以手动配置，需要手动把`react-native-vector-icons`中所有字体全部加进来，如下：

需要把自己生成的iconfont.ttf拖进项目不然会报这个错

RN代码实现

使用

自动的字体图库

使用组件自带的库

用作Button组件

用作静态的图片资源

有时候我们可能不想用图标组件，而想使用Image组件来显示这些字体图标：

配合TabBarIOS组件使用

在NavigatorIOS组件中使用

在ToolbarAndroid组件中使用

react-native-vector-icons安装

使用阿里矢量图标库iconfont的使用

上传或者寻找icon

mac下如果报错Permission denied就先修改文件权限

项目中使用

android端的配置

执行react-native link命令后,Android目录下这个库已经自动为把字体文件引入到app/src/main中并创建了assets/fonts的目录

在android/app/build.gradle文件添加

配置 android/settings.gradle

配置android/app/build.gradle

配置 android/app/src/main/java/com/xxxx/MainApplication.java

iOS端的配置

xcode检查有没有把库链接进去

运行react-native link命令后iOS工程目录下info.plist文件中多了一行Fonts provided by application，也可以手动配置，需要手动把react-native-vector-icons中所有字体全部加进来，如下：

需要把自己生成的iconfont.ttf拖进项目不然会报这个错

RN代码实现

使用

自动的字体图库

使用组件自带的库

用作Button组件

用作静态的图片资源

有时候我们可能不想用图标组件，而想使用Image组件来显示这些字体图标：

配合TabBarIOS组件使用

在NavigatorIOS组件中使用

在ToolbarAndroid组件中使用

执行`react-native link`命令后,Android目录下这个库已经自动为把字体文件引入到`app/src/main`中并创建了`assets/fonts`的目录

在`android/app/build.gradle`文件添加

运行`react-native link`命令后iOS工程目录下`info.plist`文件中多了一行`Fonts provided by application`，也可以手动配置，需要手动把`react-native-vector-icons`中所有字体全部加进来，如下：