在反應本機

Question

中使用ListView數據源中的觸摸高亮我正在使用ListView與數據源，從其餘數據源獲取其數據源到服務器。

renderRow(rowData){ 
    var imageURL = rowData.banner; 

    return (
     <View> 
     <Text >{rowData.name}</Text> 
     <Image 
      style={{width: 80, height: 80}} 
      source={{uri: imageURL, width: 400, height: 400}} 
     /> 
     </View> 
    ); 
    } 

    render() { 
    return (
     <View> 
      <ListView 
      enableEmptySections 
      dataSource={this.state.dataSource} renderRow={this.renderRow.bind(this)} 
      style={styles.listview}/> 

     </View> 
)} 

現在，我想添加一個按鈕按下效果到呈現在renderRow函數中的數據源中的數據的視圖。我已經改變了我的代碼。

 renderRow(rowData){ 
     var imageURL = rowData.banner; 

     return (
     <TouchableHighlight style={ this.state.pressStatus ? styles.buttonPress : styles.button } 
          onPress={this._changeStyleAndNavigate.bind(this)}> 
      <View> 
      <Text >{rowData.name}</Text> 
      <Image 
       style={{width: 80, height: 80}} 
       source={{uri: imageURL, width: 400, height: 400}} 
      /> 
      </View> 
</TouchableHighlight> 
     ); 
     } 

    _changeStyleAndNavigate() { 
    this.setState({ pressStatus: true }); 

    } 

我有2種不同的風格，爲這TouchableHighlight視圖使用不同的顏色。如果用戶觸摸TouchableHighlight視圖，則更改顏色並以此方式給出按鈕按壓感覺。

但現在我的問題是如果在ListView中有多行，然後按一行將改變所有行（TouchableHighlight Views）的顏色。

那麼，有沒有一種方法可以給每行一個ID並根據ID改變顏色？

Answer 1

請參閱RN文檔，以幫助您解決問題的方法更簡單：https://facebook.github.io/react-native/docs/touchablehighlight.html

有一個叫underlayColor組件屬性。只需給它一個值（按下該項目時你想看到的顏色）。所以你的組件看起來應該是這樣的：

<TouchableHighlight style={styles.button} underlayColor={'#ff0000'}>