React-Native使用自定义字体

image.png

首先挑选你喜欢的字体并下载到本地，这里推荐一个可以免费下载字体的网站 方正字库

注意：下载的字体叫什么名字就是什么，千万不要修改。

安卓端

将下载好的字体文件拷贝到 android/app/src/main/assets/fonts/ 目录下

IOS端

在 Xcode 工程中新建一个 fonts 目录

image.png image.png image.png image.png

并将字体文件拖拽到 fonts 目录下，拖拽字体文件时一定要按我这样勾选

image.png

然后观察 Copy Bundle Resources 中是否成功加入了字体文件

image.png

还有很重要的一步，在 info.plist 文件中添加字体

image.png

最后在代码中 fontFamily 指定字体名称就可以了

import React from 'react';
import {Text, StyleSheet, View, Dimensions} from 'react-native';

export default class Home extends React.Component {
  render() {
    return (
      <View style={styles.content}>
        <Text style={{fontFamily: 'FZSJ-LIANGWZDQS'}}>
          智者一切求自己，愚者一切求他人。
        </Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  content: {
    display: 'flex',
    flexDirection: 'column',
    justifyContent: 'center',
    alignItems: 'center',
    width: Dimensions.get('window').width,
    height: Dimensions.get('window').height,
  },
});

效果截图

image.png