React Native中如何将JSON字符串局部内容设置为粗体？

直接在JSON中使用<boldText>标签不可行，因为JSON中的字符串会被当作纯文本渲染，React Native无法识别未注册的自定义标签，最终会直接显示<boldText>文本而非应用样式。

推荐使用自定义标记+文本解析的方案，既避免XSS风险，又能实现部分文本加粗：

1. 修改JSON内容，添加自定义标记 #

用安全的标记（比如**）包裹需要加粗的内容，示例：

{
    "key1": "key1",
    "value1": "I only want **this part** of the text to be bold",
    "key2": "key2",
    "value2": "I don't want any text here to be bold"
}

2. 编写文本解析函数 #

实现一个函数，将带标记的字符串拆分为普通文本和加粗文本片段，分别对应不同样式：

const parseTextWithBold = (text, styles) => {
  // 按**分割文本，提取普通内容和加粗内容
  const textSegments = text.split(/\*\*(.*?)\*\*/);
  
  return textSegments.map((segment, index) => {
    // 奇数索引的片段是被**包裹的内容，应用粗体样式
    if (index % 2 === 1) {
      return <Text key={index} style={styles.boldText}>{segment}</Text>;
    }
    // 偶数索引是普通文本，应用默认样式
    return <Text key={index} style={styles.normalText}>{segment}</Text>;
  });
};

3. 调整样式定义 #

移除boldText中的paddingBottom，避免多个文本片段重复添加间距：

const styles = StyleSheet.create({
  normalText: {
    fontSize: 15,
    lineHeight: 21,
    fontWeight: '400',
    paddingBottom: 24,
  },
  boldText: {
    fontSize: 15,
    lineHeight: 21,
    fontWeight: '700',
  },
});

4. 渲染解析后的文本 #

调用解析函数替换原有的直接渲染方式：

<Text>{parseTextWithBold(jsonData.get(item.value), styles)}</Text>

这种方案完全由你控制解析逻辑，不存在XSS注入风险，同时能精准实现部分文本的样式自定义。

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