本文首发于 洛竹的博客,同步于 掘金

  1. 下载免费商用字体

    法棍体:链接:https://pan.baidu.com/s/1M-CDEqsJ06qj-42uRyF0WA 密码:83er

  2. 使用 FontLab 查看字体的 fontFamily

    FontLab 破解版 Mac:

    链接:https://pan.baidu.com/s/1Wb3xgB9mJqF4YGX0xXddMg 密码:1cfb

  3. 将字体放到放在项目根目录:

  1. 在根目录新建 react-naitve.config.js:

    1
    2
    3
    4
    5
    6
    7
    module.exports = {
    project: {
    ios: {},
    android: {},
    },
    assets: ['./fonts'],
    }
  2. 在根目录执行 react-native link 命令

  3. 使用字体:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    // 全局
    const TextRender = Text.render
    Text.render = (...args) => {
    const originText = TextRender.apply(this, args)
    const { style } = originText.props
    return React.cloneElement(originText, {
    allowFontScaling: false,
    style: [{ fontFamily: 'Baguette' }, style],
    })
    }
    // 局部
    <Text style={{ fontSize: 50, fontFamily: 'Baguette' }}> 法棍体🥖 </Text>
  4. 效果:

    WechatIMG1166.jpeg

附录