反應原生ListView

Question

我有問題獲取列表視圖自行更新。我有一些虛擬數據和一張圖片，我想渲染一張圖片或未選中的圖片。列表視圖呈現正確，我只是沒有從列表視圖上按自動重新呈現。

我有這樣的getInitialState功能：

var ds = new ListView.DataSource({ 
    rowHasChanged: (r1, r2) => r1 != r2 
}) 

var dummyData = this.props.navigator.dummyData; 
var formattedData = this.formatData(dummyData); 

return ({ 
    data: formattedData, 
    dataSource: ds.cloneWithRows(formattedData), 
    selectedRow: {}. 
}) 

formatData: function(data){...} // code to format data, it is working as intended 

在我使我有這樣的：

render:function() { 
    return(
    <View> 
     <ListView 
     style={{flex:10}} 
     dataSource={this.state.dataSource} 
     renderRow={this.renderRow} 
     renderSeperator={this.renderSeperator} 
     enableEmptySections={true} 
     /> 
    </View> 
) 
} 

renderRow：

renderRow: function(rowData) { 
    return(
    <TouchableHighlight onPress={() => {this.selectRow(rowData)} } > 
    <View style={{borderLeftWidth: 8, borderLeftColor: '#81BD41'}}> 
    <View style={styles.scheduleRow}> 

     <View style={styles.shiftTextContainer}> 
     <Text style={styles.textName}> 
      {rowData.firstName} {rowData.lastName} 
     </Text> 
     </View> 

     <View style={styles.checkedContainer}> 
     {this.imageCheck(rowData)} 
     </View> 

    </View> 
    </View> 
    </TouchableHighlight> 

在新聞selectRow

selectRow: function(rowData) { 

    console.log(this.state.selectedRow == rowData); 
    var copyData = this.state.data; 

    if (this.state.selectedRow === rowData) { 
     this.setState({selectedRow:''}); 
     rowData.selected = false; 
    } else { 
     this.setState({selectedRow: rowData}) 
     rowData.selected = true; 
    } 

    this.setState({dataSource: this.state.dataSource.cloneWithRows(copyData)}); 
    this.renderRow(rowData); 
    }, 

最後圖像檢查：

imageCheck: function(rowData) { 
    var image = ''; 

    if (this.state.selectedRow === rowData) { 
     image = checkedImage; 
    } else { 
     image = uncheckedImage; 
    } 

    return (
     <View> 
     <Image style={styles.imageSize} source={image} /> 
     </View> 
    ) 
    }, 

我已經試過手動調用列表視圖renderRow功能以及使「新數據」的副本，並使用cloneWithRows回this.state.dataSource。我無法使圖像複選標記自動刷新。如果我保存了項目，它會通過熱重載來適當地呈現列表視圖。

我在這裏做錯了什麼？我懷疑它要麼是我必須使用ListView的onVisibleChange函數來讓渲染自動觸發或更改我初始狀態下的rowHasChanged以更適當地反映更改。但是，我聽說onVisibleChange在android方面存在一些bug，所以除非這是我不想用它來修復這個bug的唯一解決方案。

謝謝你的時間。

Answer 1

嘗試在您的行中添加id，不要直接比較rowData，也不必在selectRow函數中添加this.renderRow(rowData);。您的代碼如下所示：

renderRow: function(rowData) { 
    return(
     <TouchableHighlight onPress={() => {this.selectRow(rowData.id)} } > 
     ... 
    ); 
} 

selectRow(rowId){ 

    this.setState({selectedRow:rowId}); 
} 

imageCheck(){ 

    if (this.state.selectedRow == rowData.id){ 
     image = checkedImage; 
    } 
    else{ 
     image = uncheckedImage; 
    } 

    return (
     <View> 
     <Image style={styles.imageSize} source={image} /> 
     </View> 
    ); 
}