React Native iOS端Native Base中Roboto字体粗细变体不生效问题

问题根源 #

Native Base的样式系统基于主题配置运转，直接在组件style中设置fontFamily会被主题的默认字体规则覆盖，因此只有通过主题注册的字体变体才能被Native Base组件识别。

解决方案 #

1. 自定义Native Base主题，注册Roboto字体变体 #

创建自定义主题文件（如theme.ts），扩展Native Base默认主题并配置字体映射：

import { extendTheme } from 'native-base';

const theme = extendTheme({
  fontConfig: {
    Roboto: {
      400: {
        normal: 'Roboto-Regular',
      },
      500: {
        normal: 'Roboto-Medium',
      },
      700: {
        normal: 'Roboto-Bold',
      },
      // 按需添加其他字重变体
    },
  },
  fonts: {
    heading: 'Roboto',
    body: 'Roboto',
    mono: 'Roboto',
  },
});

export default theme;

注意：代码中的字体名称（如Roboto-Medium）必须和你引入的字体文件名完全一致，iOS对文件名大小写敏感。

2. 在App入口应用自定义主题 #

用NativeBaseProvider包裹根组件，传入自定义主题：

import { NativeBaseProvider } from 'native-base';
import theme from './theme';

export default function App() {
  return (
    <NativeBaseProvider theme={theme}>
      {/* 你的应用组件 */}
    </NativeBaseProvider>
  );
}

3. 使用字体变体的两种方式 #

• 方式一：通过fontWeight属性调用
  利用主题中配置的字重映射，直接设置组件的fontWeight属性：

  import { Text } from 'native-base';
  
  // 显示Roboto-Medium
  <Text fontWeight="500">这是Medium字体</Text>
  // 显示Roboto-Bold
  <Text fontWeight="700">这是Bold字体</Text>
  

• 方式二：直接指定fontFamily（需主题兼容）
  若坚持直接设置fontFamily，需确保主题中已注册该字体名称，且与文件名完全匹配：

  <Text style={{ fontFamily: 'Roboto-Medium' }}>这是Medium字体</Text>
  

4. 验证iOS字体链接有效性 #

• 检查info.plist中的Fonts provided by application数组，确认包含所有Roboto变体的完整文件名（如Roboto-Regular.ttf、Roboto-Medium.ttf等）。
• 确认字体文件已添加到Xcode的Bundle Resources（右键项目 -> Build Phases -> Copy Bundle Resources）。
• 重启Xcode和Metro服务，清除缓存后重新编译。

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