React Native中如何为State值设置与其余文本不同的显示颜色

直接嵌套Text组件即可实现同段文本的差异化样式，这是React Native官方支持的标准用法，子组件会默认继承父组件的所有样式，仅需要覆盖你需要调整的颜色属性即可：

修改后的组件代码 #

<Text style={[styles.text]}>
    Province - <Text style={styles.provinceText}>{ province }</Text>
</Text>

对应样式配置 #

const styles = StyleSheet.create({
  // 你原有的基础文本样式
  text: {
    color: '#333', // 原有文本颜色
    fontSize: 16
  },
  // 单独定义province的样式
  provinceText: {
    color: '#f5222d' // 替换为你想要的自定义颜色即可
  }
})

如果需要给province加其他特殊样式（比如加粗、下划线），直接在provinceText里加对应属性即可，不会影响外层文本的样式。

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