React-Native中能否为部分文本设置粗体？附代码示例咨询

数据老陈

2026-5-15

当然可以实现局部加粗！

在React Native中，<Text>组件支持嵌套其他<Text>子组件，这就允许我们给文本的不同片段设置独立样式——完全能实现你想要的Foo loves you效果，不用依赖HTML标签（毕竟RN不支持原生HTML渲染）。

分两种场景给你方案：

1. 文本内容固定（已知`props.title`就是"Foo loves you"）

直接拆分文本，把需要加粗的部分嵌套进带样式的<Text>即可：

<Text style={styles.itemTitle}>
  <Text style={{ fontWeight: 'bold' }}>Foo</Text> loves <Text style={{ fontWeight: 'bold' }}>you</Text>
</Text>

这里fontWeight除了用'bold'，也可以用数字值（比如700），效果是一致的。

2. 文本内容动态（`props.title`可能是任意字符串，需要匹配特定关键词加粗）

如果props.title是动态变化的，你可以写一个辅助函数来处理文本拆分和样式包裹。比如要自动加粗"Foo"和"you"这两个关键词：

// 定义文本处理函数
formatBoldText = (text) => {
  const boldKeywords = ['Foo', 'you'];
  // 按关键词拆分文本片段
  const textSegments = text.split(new RegExp(`(${boldKeywords.join('|')})`, 'g'));
  
  // 遍历片段，给关键词套上加粗样式的Text
  return textSegments.map((segment, index) => {
    if (boldKeywords.includes(segment)) {
      return <Text key={index} style={{ fontWeight: 'bold' }}>{segment}</Text>;
    }
    return segment;
  });
}

// 渲染时调用函数
render() {
  return (
    <Text style={styles.itemTitle}>
      {this.formatBoldText(this.props.title)}
    </Text>
  );
}

这个函数会把文本中所有匹配boldKeywords的部分自动加粗，不管它们在字符串里的位置。