玩转 React Native 自定义字体

1. 下载免费商用字体

   法棍体：链接:pan.baidu.com/s/1M-CDEqsJ… 密码:83er

2. 使用 FontLab 查看字体的 fontFamily

   FontLab 破解版 Mac：

   链接:pan.baidu.com/s/1Wb3xgB9m… 密码:1cfb

   

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

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

   module.exports = {
     project: {
       ios: {},
       android: {},
     },
     assets: ['./fonts'],
   }
   

5. 在根目录执行 react-native link 命令

6. 使用字体：

   // 全局
   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>
   

7. 效果：

   

附录

• React Native 中开箱即用的字体