如何在React Native的Text组件中修改特定文字的颜色

看你提供的效果，是要给文本里特定单词加上背景高亮，直接拆分文本并给目标片段加样式就能实现，具体代码如下：

固定文本的高亮实现 #

import React from 'react';
import { View, Text, StyleSheet } from 'react-native';

const Testing = ({ navigation }) => {
  return (
    <View style={styles.container}>
      <Text> 我妈妈的眼睛是 </Text>
      <Text style={styles.highlight}>蓝色</Text>
      <Text> 的，我爸爸的眼睛是 </Text>
      <Text style={styles.highlight}>深绿色</Text>
      <Text> 的。</Text>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    paddingHorizontal: 16,
  },
  highlight: {
    backgroundColor: '#FFFF00', // 黄色高亮背景，可根据需求修改颜色
    paddingHorizontal: 3,
    borderRadius: 2,
  },
});

export default Testing;

动态文本的高亮实现（可选） #

如果需要根据关键词自动匹配高亮（不是固定文本），可以写个工具函数来处理：

import React from 'react';
import { View, Text, StyleSheet } from 'react-native';

const Testing = ({ navigation }) => {
  // 高亮工具函数
  const getHighlightedText = (text, keywords) => {
    const splitParts = text.split(new RegExp(`(${keywords.join('|')})`, 'gi'));
    return splitParts.map((part, index) => {
      const isHighlight = keywords.some(key => key.toLowerCase() === part.toLowerCase());
      return isHighlight 
        ? <Text key={index} style={styles.highlight}>{part}</Text> 
        : <Text key={index}>{part}</Text>;
    });
  };

  const targetText = '我妈妈的眼睛是蓝色的，我爸爸的眼睛是深绿色的。';
  const highlightKeywords = ['蓝色', '深绿色'];

  return (
    <View style={styles.container}>
      {getHighlightedText(targetText, highlightKeywords)}
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    paddingHorizontal: 16,
  },
  highlight: {
    backgroundColor: '#FFFF00',
    paddingHorizontal: 3,
    borderRadius: 2,
  },
});

export default Testing;

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