今天,学习一下在React-Native中使用自定义字体.使用版本是"react-native": "0.59.8"

首先先在项目根目录新建一个文件夹用来存放XXXX.ttf字体文件,我一般喜欢在最外面加一个assets文件夹,里面再加一个fonts文件夹,之后再放置字体文件XXX.ttf.
然后,在package.json中加入该文件路径.

1
2
3
4
5
6
7
8
9
{
....
"rnpm": {
"assets": [
"./assets/fonts"
]
}

}

如图:
customFontDemo1
之后,终端cd 到项目根目录,然后运行react-native link.
完成之后打开Xcode可以看到生成了Resources文件夹下的xxx.ttf字体文件,同时在项目的info.plist中多了Fonts provided by application这个数组,其中就有前面的xxx.ttf文件.
如图:
customFontDemo2

OK.字体文件已经配置完毕,接下来使用即可.在iOS平台上不能直接使用字体文件名,需要使用familyNames才可以.我们先获取一下该字体文件的的familyNames.
AppDelegate.m中,使用

1
2
3
4
5
6
7
8
9
for(NSString *fontfamilyname in [UIFont familyNames]) {

NSLog(@"family:'%@'",fontfamilyname);

for(NSString *fontName in [UIFont fontNamesForFamilyName:fontfamilyname]) {
NSLog(@"\tfont:'%@'",fontName);
}
NSLog(@"-------------");
}

customFontDemo3
其中

1
NSLog(@"family:'%@'",fontfamilyname);

打印的就是familyNames.
android直接使用字体文件名xxx即可.
如图:
customFontDemo4
效果如图(部分字体只能使用真机才能看出来):
customFontDemoResult

源码