React Native 更改字符串中变量的颜色

Question

我有一段文本，里面有变量。我需要更改文本变量的颜色以将其与其余文本区分开来，我该如何实现？

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

Answer 1

为了改变文本组件中文本的颜色，需要在另一个文本组件中用不同颜色包裹字符串。

代码如下：

<Text style={styles.text}>
  `We'll get `
  <Text style={{
    color: 'aqua',
    // other styles that you want applied to the text
  }}>{recipient}</Text>
  `to list anything you should know about the ${item}`
</Text>

Answer 2

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

您可以像这样在样式对象中定义变量样式：

const styles = StyleSheet.create({
  text: {
    fontSize: 16,
    color: 'black',
  },
  variable: {
    color: 'red',
  },
});