React-Native项目 — 自定义字体的使用

系列文章目录

React-Native环境搭建（IOS）
React-Native项目 — 关于IOS知识储备
React-Native项目工程搭建（开发模板搭建）
React-Native项目矢量图标库（react-native-vector-icons）

前言

在实际的移动端项目开发中，原生安卓和Ios自带的字体，虽然足够工整、耐看、适配大多数的场景。

但是在一些特殊场合下，那些规范的字体，可能不太适合我们的app设计，而且，通常情况下，设计师的设计元素里面，本身也包含了一些第三方的特殊字体的使用，这就使得我们的项目中，有足够的能力，支持第三方的字体使用。

阿里妈妈刀隶体

一、自定义字体是什么

计算机中，针对全世界的语言符号，进行了一次标准的排序，每一个专门的文字符号，都有对应的一个字符编码，我们汉语也是一样，每一个单独的汉字，都有其特定的编码。

每一种字体，就是需要设计这些编码，所对应的文字符号长什么样。而我们的浏览器中，移动端app中，都会有自己的默认字体，这就是我们能够正常的打字的原因。

第三方的自定义字体，就是把这些编码，重新规划了一套自己所设计的风格，每一个字符编码，都对应一个自定义风格的字体设计，这就是我们的三方字体的基本原理。

二、自定义字体如何使用

1、必须先有一个字体文件

每一套自定义字体，归根到底都会是一个字体文件，一般常用的字体文件以.ttf为文件后缀。

这个字体文件，里面存放的就是一个个字体编码，以及对应的字体符号的一个映射表。

一般而言，我们都会从设计师那里，拿到这个字体文件。

2、定义公共asset目录

一般在 RN 项目的 /assets/fonts 目录里面，把获取到的字体文件放到该目录下。

在这里插入图片描述

3、配置文件link规则

项目根目录下创建 react-native.config.js 文件

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

4、link

执行 npx react-native link（RN 版本 < 0.69 版本）

或者，npx react-native-asset（RN 版本 >= 0.69 版本）
在这里插入图片描述

5、代码示范

import React from 'react';
import {Text, View, StyleSheet} from 'react-native';
import commonStyles from '../../styles/common';

export default function ChatScreen() {
  return (
    <View style={commonStyles.center}>
      <Text>ChatScreen</Text>
      <Text style={styles.textStyle}>阿里妈妈刀隶体</Text>
    </View>
  );
}
const styles = StyleSheet.create({
  textStyle: {
    fontFamily: 'AlimamaDaoLiTi',
    fontSize: 30,
  },
});