iOS端使用Native Base时React Native自定义字体不生效

1. 检查字体注册配置 #

确保nativebase.config.js中正确注册了粗体字体变体，路径和文件名必须与实际文件完全一致（iOS对大小写敏感）：

export default {
  fontConfig: {
    Roboto: {
      400: {
        normal: 'Roboto-Regular',
      },
      700: {
        normal: 'Roboto-Bold', // 对应粗体字重的字体文件标识
      },
    },
  },
  fonts: {
    Roboto: require('./assets/fonts/Roboto-Regular.ttf'),
    'Roboto-Bold': require('./assets/fonts/Roboto-Bold.ttf'), // 确认文件路径无误
  },
};

2. 使用Native Base的fontWeight属性而非直接指定fontFamily #

Native Base的Text组件会根据fontWeight自动匹配已注册的字体变体，直接在style中写fontFamily容易被组件默认样式覆盖：

import { Text } from 'native-base';

const Component = () => {
  // 正确方式：通过fontWeight触发粗体字体
  return <Text fontWeight="bold">Hello world</Text>;
};

也可以直接使用字重数值（对应配置里的数字）：

<Text fontWeight={700}>Hello world</Text>

3. 清除缓存并重启项目 #

字体配置变更后常需要清理缓存才能生效：

• 清除React Native缓存：npx react-native start --reset-cache
• iOS：删除Pods文件夹，执行pod install后重启模拟器
• Android：删除android/app/build文件夹，重启模拟器

4. 验证字体是否正确打包 #

• iOS：打开Xcode，查看Build Phases → Copy Bundle Resources中是否包含Roboto-Bold.ttf
• Android：确认android/app/src/main/assets/fonts目录下存在Roboto-Bold.ttf

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