React Native 0.73.5中Quicksand字体700权重失效问题求助

方案1：避免fontFamily与fontWeight的冲突 #

React Native在处理fontWeight: '700'时，可能会强制应用系统级粗体效果，覆盖自定义粗体字体。在你的自定义Text组件中，映射权重到对应字体族后，需要将fontWeight重置为'normal'，避免样式冲突：

// 自定义Text组件核心逻辑示例
import React from 'react';
import { Text as RNText, StyleSheet } from 'react-native';

const FONT_FAMILY = {
  SEMIBOLD: 'Quicksand-SemiBold',
  BOLD: 'Quicksand-Bold',
};

const fontWeightMap = {
  '600': FONT_FAMILY.SEMIBOLD,
  '700': FONT_FAMILY.BOLD,
};

const Text = ({ style, ...props }) => {
  let computedStyle = {};
  const incomingFontWeight = StyleSheet.flatten(style)?.fontWeight;
  
  if (incomingFontWeight && fontWeightMap[incomingFontWeight]) {
    // 使用映射的字体族，并重置fontWeight为normal
    computedStyle = {
      fontFamily: fontWeightMap[incomingFontWeight],
      fontWeight: 'normal', // 关键：避免RN强制叠加系统粗体
    };
  }

  return (
    <RNText style={[style, computedStyle]} {...props} />
  );
};

export default Text;

方案2：验证字体文件的配置与名称正确性 #

1. iOS端检查：

   • 确认Info.plist的UIAppFonts数组中已添加Quicksand-Bold.ttf（文件名需与实际导入的一致）。
   • 打开Mac的Font Book，找到Quicksand Bold字体，查看其PostScript名称（比如可能是QuicksandBold而非Quicksand-Bold），确保FONT_FAMILY.BOLD的值与该名称完全匹配。

2. Android端检查：

   • 确认android/app/src/main/assets/fonts目录下存在Quicksand-Bold.ttf。
   • 检查res/values/fonts.xml（不存在则创建），确保配置正确：

     <font-family xmlns:android="http://schemas.android.com/apk/res/android">
       <font
         android:fontStyle="normal"
         android:fontWeight="700"
         android:font="@font/Quicksand-Bold" />
     </font-family>
     

方案3：绕过RN的权重自动匹配逻辑 #

如果上述方案无效，可以直接在自定义Text组件中根据传入的权重替换fontFamily，完全移除fontWeight属性，避免RN的自动样式干扰：

// 自定义Text组件样式处理逻辑修改
const Text = ({ style, ...props }) => {
  const flattenedStyle = StyleSheet.flatten(style) || {};
  let finalStyle = { ...flattenedStyle };

  switch (flattenedStyle.fontWeight) {
    case '600':
      finalStyle.fontFamily = FONT_FAMILY.SEMIBOLD;
      delete finalStyle.fontWeight;
      break;
    case '700':
      finalStyle.fontFamily = FONT_FAMILY.BOLD;
      delete finalStyle.fontWeight;
      break;
    // 其他权重处理...
  }

  return <RNText style={finalStyle} {...props} />;
};

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