如何在独立Stylesheet文件中使用expo-fonts？（Expo、React Native）

核心问题 #

StyleSheet.create在模块导入阶段就会执行并创建样式对象，此时如果自定义字体还未完成加载，或者字体名称匹配错误，React Native会自动回退到默认字体；而内联样式是在组件渲染时才应用，此时字体已经加载完成，所以能正常生效。

解决方案 #

1. 确认字体名称完全匹配

很多时候字体文件名和实际字体内部名称不一致（比如文件名是SpicyRice-Regular.ttf，实际字体名称可能是Spicy Rice），这是最常见的坑。

• 用Expo的useFonts钩子加载后，打印字体映射确认真实名称：

  const [fontsLoaded] = useFonts({
    'SpicyRice': require('./fonts/SpicyRice-Regular.ttf'),
  });
  console.log(fontsLoaded); // 输出中可查看实际可用的字体键名
  

• 也可以用系统工具（比如Mac的字体册、Windows的字体查看器）打开字体文件，查看其“全名”或“PostScript名称”，确保styles中使用的fontFamily值和这个名称完全一致。

2. 确保样式在字体加载完成后生效

因为StyleSheet是静态创建的，若字体加载晚于样式创建，就会导致字体不生效，可通过两种方式解决：

方式一：封装动态样式Hook

将样式创建逻辑放到Hook中，确保在组件渲染（字体已加载）时才生成样式：

// useCustomStyles.ts
import { StyleSheet } from 'react-native';

export const useCustomStyles = () => {
  return StyleSheet.create({
    customText: {
      fontFamily: 'SpicyRice', // 这里用确认后的真实字体名称
      color: 'red',
    },
  });
};

在组件中使用：

import { View, Text } from 'react-native';
import { useCustomStyles } from './useCustomStyles';

export default function MyComponent() {
  const styles = useCustomStyles();
  
  return (
    <View>
      <Text style={{fontFamily: "SpicyRice"}}>THIS IS WORKING WITH THE CUSTOM FONT.</Text>
      <Text style={styles.customText}>NOW THIS SHOULD USE THE CUSTOM FONT TOO.</Text>
    </View>
  );
}

方式二：全局等待字体加载完成再渲染App

在根组件中确保字体加载完成后再挂载业务组件，这样所有StyleSheet在创建时字体已经可用：

// App.tsx
import { useFonts } from 'expo-font';
import AppLoading from 'expo-app-loading';
import MyComponent from './MyComponent';

export default function App() {
  const [fontsLoaded] = useFonts({
    'SpicyRice': require('./fonts/SpicyRice-Regular.ttf'),
  });

  if (!fontsLoaded) {
    return <AppLoading />;
  }

  return <MyComponent />;
}

此时styles.tsx中的静态StyleSheet就能正常识别字体。

3. 验证字体资源是否正确导入

• 若使用npx react-native-asset，检查android/app/src/main/assets/fonts和ios/[你的项目名]/Resources/Fonts目录下是否存在你的字体文件；
• Expo项目优先使用expo-font的useFonts或loadAsync导入字体，无需依赖react-native-asset，避免两种方式冲突。

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