APP开发记录
一、目录结构
app
-
common -------公共资源 -
components -------公共组件 -
fonts -------字体 -
images -------图片 -
pages -------页面 -
redux -------状态管理 -
route -------路由 -
style -------公共样式主题
二、引入icon步骤
-
下载icon至本地!后续步骤会使用到
-
在React-native中使用iconfont
react-native-vector-icons会把字体文件转换成相应的iconSets在Rn供我们使用。
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
]
- 使用内置iconSets(在需要的地方引入并使用)
import Icon from 'react-native-vector-icons/FontAwesome';
<Icon name='rocket' size={60} color="#4F8EF7" />
上面的方式引用的是react-native-vector-icons内置的一种iconSets, 除了FontAwesome还有其他iconSets，可以到react-native-vector-icons查看
虽然内置了很多iconSets给我们使用，但往往我们做项目时一般都会使用自己的iconfont，整么使用自己的iconfont呢？
使用自定义的iconSets
打开上面已经下载了的iconfont，目录结构如下
其中e69b是图标对应的16进制unicode我们需要的是10进制，所以把它转换一下， 下面使用的是js转换为10进制
parseInt("e69b", 16)
59035
每个图标都需要转换一次很麻烦，所以基于阿里巴巴图标矢量库下载的文件，我用js写了一个生成json的工具类。把刚下载下来的iconfont.css，iconfont.json, genJson.js放在同一目录。使用node执行genJson.js完成转换，所需要的json对象就被写入iconfont.json中了。
/*iconfont.css*/
...
.icon-checked:before {
content: "\e636";
}
.icon-logo-black:before {
content: "\e638";
}
.iconuser_actived:before {
content: "\e639";
}
/*genJson.js*/
const path = require('path');
const oldPath = path.resolve(__dirname, 'iconfont.css');
const newPath = path.resolve(__dirname, 'iconfont.json');
var gen = (module.exports = function() {
const readline = require('readline');
const fs = require('fs');
const fRead = fs.createReadStream(oldPath);
const fWrite = fs.createWriteStream(newPath, {
flags: 'w+',
defaultEncoding: 'utf8',
});
const objReadLine = readline.createInterface({
input: fRead,
});
var ret = {};
let str = '';
objReadLine.on('line', line => {
line = line && line.trim();
line = line.replace(/\s+/g, '');
if (
!line.includes(':before') &&
!line.includes('content') &&
!line.includes('}')
) {
str = '';
return;
}
// line = line.replace(/<\/?.+?>/g, '');
// line = line.replace(/[\r\n]/g, '');
if (line.indexOf(':before') !== -1) {
str = line;
} else {
str = str + line;
}
console.log('str', str);
if (
str.includes(':before') &&
str.includes('content') &&
str.includes('}')
) {
let keyMatch = str.match(/\.(.*?):/);
let valueMatch = str.match(/content:.*?\\(.*?);/);
let key = keyMatch && keyMatch[1];
let value = valueMatch && valueMatch[1];
value = parseInt(value, 16);
key && value && (ret[key] = value);
}
});
objReadLine.on('close', () => {
fWrite.write(JSON.stringify(ret), 'utf8');
});
});
gen();
创建iconSets需要的东西都准备好了，开始创建吧。
／*iconfont.json*／
{
"icon-checked": 58934,
"icon-logo-black": 58936,
}
/*iconSets.js*/
import createIconSet from 'react-native-vector-icons/lib/create-icon-set';
import glyphMap from './iconfont.json.js';
const iconSet = createIconSet(glyphMap, 'iconfont', 'iconfont.ttf');
export default iconSet;
/* app.js*/
...
import Icon from './app/common/fonts/iconSets';
<Icon name='icon-lock' size={60} color="#4F8EF7" />
