ios - 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>);
   }