React Native开发经验集React Native开发React Native开发技巧

RN中使用自定义字体 --- iOS

2018-10-17  本文已影响12人  91阿生

先看下效果图片:


image.png

步骤:

  1. 确保字体格式是ttf格式的字体,并将自定义的字体整体存入项目文件夹中


    image.png
  2. 其次,修改项目文件夹的package.json文件。
    assets: 字体文件的路径


    image.png

3.随后,命令行进入项目文件夹根目录,运行如下命令:

react-native link
  1. 检查下xocde中会多一个资源文件夹


    image.png

查看下info.plist文件中:


image.png

使用的代码:


image.png

注意⚠️:关于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判断系统类型来进行适配。

上一篇下一篇

猜你喜欢

热点阅读