React Native 同一行文本设置不同fontFamily时样式失效怎么解决

问题原因 #

React Native 对自定义字体的嵌套样式继承存在特殊逻辑：当外层指定了自定义fontFamily时，内层嵌套的fontFamily属性会被默认忽略，仅fontWeight、color等通用样式属性会继承生效，这就是整行都显示semibold的核心原因。

解决方案 #

方案1：平级Text+Flex布局（最稳定，推荐）

将两个文本拆分为平级的组件，放在同一行Flex容器中：

<View style={{ flexDirection: 'row', alignItems: 'center' }}>
  <Text style={{ color: colors.black, fontFamily: 'Montserrat-SemiBold' }}>
    String1:
  </Text>
  <Text style={{ color: colors.black, fontFamily: 'Montserrat-Regular' }}>
    second String
  </Text>
</View>

方案2：嵌套写法补充fontWeight属性

如果需要保留嵌套的写法，在内层样式中明确指定fontWeight覆盖外层继承的字重即可：

<Text
  style={[
    { color: colors.black, fontFamily: 'Montserrat-SemiBold' },
  ]}>
  String1:
  <Text
    style={[
      { color: colors.black, fontFamily: 'Montserrat-Regular', fontWeight: 'normal' },
    ]}>
    second String
  </Text>
</Text>

方案3：验证字体文件配置

如果以上方案无效，检查项目的字体配置是否正确：

• Android端：确认Montserrat-Regular.ttf文件已放到android/app/src/main/assets/fonts目录下
• iOS端：确认字体文件已加入Xcode项目，且在Info.plist的Fonts provided by application配置项中已添加对应文件名
• 配置修改后需要完全重启应用生效

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