如何在react-native-paper中替换默认字体Roboto为Poppins

我最近刚帮朋友搞定过这个需求，把react-native-paper的默认Roboto换成Poppins其实步骤很清晰，下面是详细的实现流程，还有我遇到过的坑的解决办法：

第一步：准备Poppins字体文件 #

• 先下载Poppins字体的不同字重版本（比如Regular、Medium、Bold、Light这些），建议获取完整的字重包，这样能覆盖react-native-paper所有组件的字体需求。
• 在项目根目录创建assets/fonts文件夹，把下载好的.ttf字体文件全部放进去。注意文件名要清晰，比如Poppins-Regular.ttf、Poppins-Medium.ttf，后面配置的时候会用到。

第二步：配置React Native的字体链接 #

React Native需要识别新增的字体文件，所以要做如下配置：

1. 在项目根目录创建react-native.config.js文件，添加以下内容：

module.exports = {
  assets: ['./assets/fonts/'],
};

2. 运行命令链接字体：

npx react-native-asset

如果你用的是React Native 0.60以下版本，可能需要用npx react-native link代替，但0.60+版本更推荐用react-native-asset，能避免手动配置的麻烦。

第三步：自定义react-native-paper主题并替换字体 #

react-native-paper的所有字体都通过Theme控制，我们需要自定义主题并覆盖默认字体配置：

1. 在App入口文件（比如App.js）中，导入PaperProvider和DefaultTheme：

import { PaperProvider, DefaultTheme } from 'react-native-paper';

2. 基于默认主题创建自定义主题，替换字体配置：

const customTheme = {
  ...DefaultTheme,
  fonts: {
    ...DefaultTheme.fonts,
    // 替换常规字重的字体
    regular: {
      fontFamily: 'Poppins-Regular',
      fontWeight: 'normal',
    },
    // 替换中等字重
    medium: {
      fontFamily: 'Poppins-Medium',
      fontWeight: '500',
    },
    // 替换轻量字重
    light: {
      fontFamily: 'Poppins-Light',
      fontWeight: '300',
    },
    // 替换极轻字重
    thin: {
      fontFamily: 'Poppins-Thin',
      fontWeight: '100',
    },
    // 替换标题字体（可选，根据需求调整）
    heading: {
      fontFamily: 'Poppins-Bold',
      fontWeight: 'bold',
    },
  },
};

3. 用PaperProvider包裹整个应用，并传入自定义主题：

export default function App() {
  return (
    <PaperProvider theme={customTheme}>
      {/* 这里放你的应用所有页面和组件 */}
    </PaperProvider>
  );
}

可能遇到的问题及解决办法 #

• 字体不显示，还是默认Roboto：
  1. 检查字体文件名和theme里写的fontFamily是否完全一致（iOS对大小写敏感，一定要匹配）。
  2. 重启Metro Bundler，记得加清除缓存的命令：npx react-native start --reset-cache。
  3. 检查字体是否链接成功：iOS看Info.plist里的UIAppFonts数组有没有你的字体文件名；Android看android/app/src/main/assets/fonts目录下有没有字体文件，没的话手动复制过去。
• 字体粗细不对：
  Poppins的不同粗细是单独的字体文件，不要试图用fontWeight强制改变（比如用Poppins-Regular却设置fontWeight: 'bold'），一定要对应到正确的字体文件，比如粗体就用Poppins-Bold。
• iOS上字体不生效：
  如果自动链接没成功，手动打开ios/[你的项目名]/Info.plist，添加以下内容：

  <key>UIAppFonts</key>
  <array>
    <string>Poppins-Regular.ttf</string>
    <string>Poppins-Medium.ttf</string>
    <!-- 把你所有的字体文件名都加进来 -->
  </array>
  

  然后重新编译iOS项目。

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