陣營本地替換字符串的部分與標籤元素

Question

我有，例如一個句子：

我「怎麼現在褐牛」

想找到句子中的某些詞，例如「現在」和「牛「，並讓它們在每個單詞周圍添加不​​同的標籤。例如：

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