ReactネイティブListView

Question

自分自身で更新するリストビューを取得する際に問題があります。私はダミーのデータと、チェックされていないイメージまたはチェックされていないイメージをレンダリングするイメージを持っています。リストビューが適切にレンダリングされます私は、プレス上のリストビューから自動的に再レン​​ダリングされません。

私はgetInitialState機能で、この持っている：

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

がでrenderRow：プレス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); 
    }, 

で

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> 

私はこれを持って私のレンダリングで

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 

を

そして最後に画像チェック：

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関数を呼び出すだけでなく、「新しいデータ」のコピーを作成し、バックthis.state.dataSourceにcloneWithRowsを使用してみました。画像のチェックマークを自動的に更新することができません。プロジェクトを保存すると、ホットリロードによってリストビューが適切にレンダリングされます。

私はここで間違っていますか？私はそれがどちらか私は、自動的に発生させるレンダリングを取得するListViewのonVisibleChange関数を使用するか、より適切に変更を反映するために私の初期状態でrowHasChangedを変更する必要があると思われる。しかし、私はonVisibleChangeがアンドロイド側にいくつかのバグを持っていると聞きます。それが唯一の解決策でない限り、このバグを修正するためにそれを使用したくありません。

ありがとうございます。あなたの行のidを追加

Answer 1

てみ、また、あなたのselectRow機能でthis.renderRow(rowData);を追加する必要はありません、直接rowDataを比較しません。あなたのコードは次のようになります：