React Native Picker无法使用Poppins-Medium字体？求解决方法

核心问题 #

React Native 原生Picker在Android端基于原生Spinner实现，直接通过style设置fontFamily通常无法生效，因为原生组件的样式控制逻辑和RN的JS样式不兼容。以下是具体解决步骤：

1. 确认字体文件已正确导入项目 #

• 将Poppins-Medium.ttf字体文件放入android/app/src/main/assets/fonts/目录（若不存在fonts文件夹则手动创建）。
• 若项目有react-native.config.js，确保添加字体资源配置：

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

• 执行npx react-native link完成字体链接（RN 0.60+版本支持自动链接，但手动执行可避免遗漏）。

2. 替换为@react-native-picker/picker库（推荐方案） #

官方原生Picker已被弃用，@react-native-picker/picker提供了更灵活的样式控制，能正常识别fontFamily设置：

• 安装依赖：

  npm install @react-native-picker/picker
  # 或使用yarn
  yarn add @react-native-picker/picker
  

• 修改组件代码：

  import { Picker } from '@react-native-picker/picker';
  
  // ...你的组件代码
  <View style={{ borderRadius: 5, borderWidth: 1, overflow: "hidden", height: 35, padding: 0, top:10, borderColor:'#00BB23' }}>
    <Picker
      style={{
        width: 300,
        height: 55,
        fontSize: 25,
        fontFamily: 'Poppins-Medium',
      }}>
      <Picker.Item label="Currency" value="accNum" />
      <Picker.Item label="NGN" value="NGN" />
    </Picker>
  </View>
  

3. 验证字体名称是否正确 #

部分字体文件的内部名称与文件名不一致（例如Poppins-Medium.ttf的内部名称可能是Poppins Medium），可通过系统字体查看工具确认实际名称，再修改fontFamily的值。

4. 清除缓存并重新构建 #

• 清除RN缓存：

  npx react-native start --reset-cache
  

• 重新运行Android项目：

  npx react-native run-android
  

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