先看下效果图片:

步骤:
-
确保字体格式是ttf格式的字体,并将自定义的字体整体存入项目文件夹中
image.png
-
其次,修改项目文件夹的package.json文件。
assets: 字体文件的路径
image.png
3.随后,命令行进入项目文件夹根目录,运行如下命令:
react-native link
-
检查下xocde中会多一个资源文件夹
image.png
查看下info.plist文件中:

使用的代码:

注意⚠️:关于iOS下fontFamily要求使用字体家族名,可以通过以下代码获取 fontFamilyname
for(NSString *fontfamilyname in [UIFont familyNames]) {
NSLog(@"family:'%@'",fontfamilyname);
for(NSString *fontName in [UIFont fontNamesForFamilyName:fontfamilyname]) {
NSLog(@"\tfont:'%@'",fontName);
}
NSLog(@"-------------");
}
复制 family: 打印出来的值。
针对安卓: 安卓下fontFamily样式属性直接填写字体的文件名称即可(不填写后缀)。
跨平台开发时,可以使用Platform.OS判断系统类型来进行适配。
网友评论