Expo React Native 项目如何全局应用 Ubuntu 自定义字体

问题原因&解决方案 #

你遇到的字体不生效问题主要由3个错误导致，按下面步骤修改即可实现全项目生效：

1. 字体注册名和调用名不匹配
   你在Font.loadAsync中给Ubuntu字体注册的名称是limelight和indie，但后续在导航配置、自定义组件中调用的是不存在的ubuntuRegular，名称不对应自然无法生效。建议先把字体注册名修改为语义化名称避免混淆，修改App.js中的字体加载代码：

const getFonts = () =>
  Font.loadAsync({
    "Ubuntu-Regular": require("./assets/fonts/Ubuntu-Regular.ttf"),
    "Ubuntu-BoldItalic": require("./assets/fonts/Ubuntu-BoldItalic.ttf"),
  });

后续所有位置调用字体时，直接使用上面注册的Ubuntu-Regular、Ubuntu-BoldItalic即可。

2. 子组件重复加载字体冗余
   字体只需在App.js入口加载一次，加载完成后全项目所有组件都可以直接调用，不需要在MenuTitle等子组件中重复写Font.loadAsync逻辑，直接删除子组件中的字体加载相关代码即可。

3. 各场景字体配置修改

• 导航头部字体：把Drawer.Navigator的screenOptions中headerTitleStyle的fontFamily修改为注册名即可，注意：如果字体本身已经是粗体/斜体，不要额外设置fontWeight/fontStyle属性，避免字体失效：

headerTitleStyle: {
  fontFamily: 'Ubuntu-BoldItalic'
}

• 自定义组件字体：修改MenuTitle组件的样式配置即可：

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

const MenuTitle = ({ text, textStyles = {} }) => {
  return <Text style={[styles.title, textStyles]}>{text}</Text>;
};

export default MenuTitle;

const styles = StyleSheet.create({
  title: {
    fontSize: 20,
    paddingHorizontal: 20,
    fontFamily: 'Ubuntu-BoldItalic'
  },
});

• 全局默认字体配置：如果希望所有Text组件默认使用Ubuntu字体，不需要每个组件单独配置，可以在App.js顶部添加如下代码重写Text默认样式：

import React from 'react';
import { Text } from 'react-native';
// 重写Text默认样式，全局生效
const originalRender = Text.render;
Text.render = function render(...args) {
  const origin = originalRender.call(this, ...args);
  return React.cloneElement(origin, {
    style: [{ fontFamily: 'Ubuntu-Regular' }, origin.props.style]
  });
};

• React Native Elements组件适配：如果你用的RN Elements组件也要应用全局字体，给ThemeProvider传入自定义主题即可：

const customTheme = {
  Text: {
    style: {
      fontFamily: 'Ubuntu-Regular'
    }
  }
};
// 替换原ThemeProvider
<ThemeProvider theme={customTheme}>

内容的提问来源于stack exchange，提问作者Uğur Alp