如何在React Native中实现全局可访问的自定义字体Hook

1. 封装可复用的字体加载Hook #

把字体加载逻辑抽成独立Hook，方便全局调用：

// hooks/useFonts.js
import * as Font from 'expo-font';

export default async function useFonts() {
  await Font.loadAsync({
    'CantoraOne': require('../assets/fonts/CantoraOne-Regular.ttf'),
    // 可在此添加更多自定义字体
  });
}

2. 在根组件完成全局字体加载 #

用useState+useEffect替代弃用的AppLoading，根组件加载完字体后再渲染整个应用：

// App.js
import { useState, useEffect } from 'react';
import { View, ActivityIndicator, StyleSheet } from 'react-native';
import useFonts from './hooks/useFonts';
import MainNavigator from './navigation/MainNavigator'; // 你的主导航/核心页面组件

export default function App() {
  const [fontsLoaded, setFontsLoaded] = useState(false);

  useEffect(() => {
    async function loadAssets() {
      try {
        await useFonts();
        setFontsLoaded(true);
      } catch (err) {
        console.error('字体加载失败:', err);
        setFontsLoaded(true); // 加载失败仍继续渲染，避免应用卡死
      }
    }
    loadAssets();
  }, []);

  if (!fontsLoaded) {
    // 加载中显示指示器
    return (
      <View style={styles.loadingWrap}>
        <ActivityIndicator size="large" color="#2196F3" />
      </View>
    );
  }

  // 字体加载完成后渲染主应用
  return <MainNavigator />;
}

const styles = StyleSheet.create({
  loadingWrap: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
});

3. 全局统一使用自定义字体（可选优化） #

如果想让所有文本默认使用自定义字体，有两种便捷方式：

方式一：定义全局文本样式 #

在全局样式文件中设置默认字体，使用时直接引入：

// styles/globalStyles.js
import { StyleSheet } from 'react-native';

export const globalStyles = StyleSheet.create({
  baseText: {
    fontFamily: 'CantoraOne',
    // 可添加其他默认样式如字号、颜色
  },
});

使用示例：

import { globalStyles } from './styles/globalStyles';

<Text style={globalStyles.baseText}>自动应用自定义字体</Text>

方式二：封装自定义Text组件 #

创建一个全局Text组件，默认携带自定义字体样式，替换原生Text使用：

// components/CustomText.js
import { Text, StyleSheet } from 'react-native';

export default function CustomText({ style, ...props }) {
  return <Text style={[styles.defaultStyle, style]} {...props} />;
}

const styles = StyleSheet.create({
  defaultStyle: {
    fontFamily: 'CantoraOne',
  },
});

使用示例：

import CustomText from './components/CustomText';

<CustomText>无需手动指定 fontFamily</CustomText>

注意事项 #

• 确保字体文件路径正确，根据项目目录结构调整require路径
• 若使用Expo，需确保已安装expo-font包（执行expo install expo-font）
• 加载失败的容错逻辑不可少，避免因字体加载问题导致应用无法正常启动

内容的提问来源于stack exchange，提问作者Sves100