React Native用标记元素替换字符串的部分

Question

我有一个句子例如：

“怎么现在的棕色牛”

我想在句子中找到某些单词，例如'now'和'cow'，并在每个单词周围添加差异标签。例如：

<Text style={styles.text}>
How <TouchableHighlight><Text>now</Text></TouchableHighlight>brown<TouchableHighlight><Text>cow</Text></TouchableHighlight>

但是我看不出如何将这些元素标签添加到它们中。基本代码如下：

render() {
   return (
  var sentence = "How now brown cow";
  <TouchableHighlight onPress={() => this._pressRow(rowID)}>
    <View>
      <View style={styles.row}>
        <Text style={styles.text}>
        {sentence}
        </Text>
      </View>
    </View>
  </TouchableHighlight>
);
},

Answer 1

• 使用在遍历该数组时使用String.prototype.split()拆分您的句子。
• 请确保将flexDirection更改为row，否则单个元素将以单行显示。

• 我在每个单词后添加了空格，也许您可​​以寻找更好的解决方案，以便不会将空格添加到最后一个元素。

  render() {
    const sentence = "How now brown cow";
    const words = sentence.split(' ');
    const wordsToHighlight = ['now', 'cow'];
  
    const renderWord = (word, index) => {
      if(wordsToHighlight.indexOf(word) > -1) return (<TouchableHighlight><Text>{word} </Text></TouchableHighlight>);
      return (<Text>{word} </Text>);
    }
  
    return (<View style={{flexDirection: 'row'}}>{React.Children.map(words, renderWord)}</View>);
   }