React Native如何修改字符串中变量文本的颜色？

在React Native中，你可以通过嵌套<Text>组件的方式给变量单独设置颜色样式，具体实现如下：

步骤1：修改组件结构 #

把需要变色的{recipient}和{item}分别用独立的<Text>标签包裹，并为它们指定单独的样式：

<Text style={styles.text}>
  We'll get <Text style={styles.highlightText}>{recipient}</Text> to list anything you should know about the <Text style={styles.highlightText}>{item}</Text>
</Text>

步骤2：定义样式 #

在样式表中添加高亮文本的颜色样式：

const styles = StyleSheet.create({
  text: {
    // 基础文本样式，可根据需求调整
    fontSize: 16,
    color: '#333333',
  },
  highlightText: {
    // 变量的高亮颜色，替换成你需要的颜色值
    color: '#165DFF',
  },
});

原理说明 #

React Native的<Text>组件支持嵌套结构，子级<Text>会继承父级的通用样式（比如字体大小、字体族），同时可以通过自身的style属性覆盖特定样式（比如颜色），以此区分普通文本和变量内容。

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