ReactNative添加自定义IconFont

查阅各方大神的文档之后，总结一下自己添加的过程

ios配置

请查看[React Native如何添加自定义图标]
(https://www.cnblogs.com/xiaojun-zxj/p/6293450.html)
以下部分：

1.png

2.png

Android配置

请查看在react-native项目中使用iconfont自定义图标库(android)
以下部分：

3.png

说明：引入的ttf文件为你自定义icon的文件，可以从阿里下载，或者到这里icomoon制作自己的icon.ttf文件

ReactNative项目配置

1.安装react-native-vector-icons

    npm install react-native-vector-icons --save
    react-native link

2.js文件

inspire.js

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

const iconSet = createIconSet(glyphMap, 'inspire', '../fonts/inspire.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;

代码中有两个文件，inspire.json和inspire.ttf（就是你自定义的icon文件），这里我把它们放到项目里的fonts文件夹下了。
这个js文件我是放到component中，作为组件引入。只要放到某个位置正确引入就行。

3.json文件

在你下载的图标文件夹中有一个svg文件

4.png

编写脚本来生成我们需要的json文件，查看ReactNative中如何使用自定义的iconfont

5.png

如果运行脚本出现-bash: ./json.sh: Permission denied 这个错误，是因为没有执行sh文件的权限，赋权限：chmod u+x *.sh就可以运行了

我在用上面的脚本执行完之后生成的内容是这样的：

6.png

实际我们需要的是这种：

7.png

不知道是脚本问题还是我们修改的有问题，好在我的图标个数不是很多，我手动修改为正确的值了。
在图标文件夹下有一个selection.json文件

8.png

打开这个文件，格式化下，会看到这样的数据：

9.png

name对应的就是图标的名字，code对应的上面不正确json里xe那部分值。

这样一切就绪后，在我们的代码中就可以使用自己的icon了。

4.js代码使用

import Icon from './inspire';

/*your code*/

render(){
  return(
    <Icon name="time" size={24} color='#b4b4b4'></Icon>
  )
}

注意：json中name的值加引号，code值不加引号。js、json、ttf文件命名最好一致（之前试过不一致好像会报错，没有查明原因）。

10

这个值最好也保持命名一致。[手动捂脸]

补充：Android通过上述方法图标显示的是乱码，只要将js、json、ttf文件放到react-native-vector-icons相应文件夹中，图标才能正常显示。js文件放到根目录，json文件放到glyphMap文件夹，ttf放到Fonts文件夹中。引入时为import Icon from 'react-native-vector-icons/inspire'

最后编辑于：2018.11.02 15:38:06