更新react-native listview

Question

我已經使用了一些例子讓我看到這一點，但我無法看到顯示列表更改的視圖。我有一個聯繫人列表，在選擇/ deSelect我想改變背景的顏色。唯一更新的是在做出選擇之後，我進行了代碼更改並在啓用了熱重新加載的情況下進行保存，然後顯示爲應該顯示的內容。我試着做一個forceUpdate（），這也沒有工作。

constructor(props) { 
    super(props); 
    this.selectedContactArray = []; 
    var ds = new ListView.DataSource({ rowHasChanged: (row1, row2) => row1 !== row2 }); 

    this.state = { 
     dataSource: ds.cloneWithRows(this.props.contactListState), 
     db: this.props.contactListState, 
     nameFilter: '', 
     selectedContacts: [], 
     visibleWidth: Dimensions.get('window').width, 
     visibleHeight: Dimensions.get('window').height 
    }; 
    } 

選擇功能

 _handleSelectContact(rowData) { 
    this.add = true; 

    var result = this.state.db.slice(); 
    _.each(this.selectedContactArray, (item) => { 
     if (item === rowData) 
     this.add = false; 
    }); 

    if (this.add) { 
     this.selectedContactArray.push(rowData); 
     result = _.filter(this.state.db, (item) => { 
     if (item == rowData) 
      item.isSelected = true; 
     return item; 
     }); 
    } 
    else { 
     this.selectedContactArray = _.filter(this.state.selectedContacts, (item) => { 
     return item != rowData; 
     }); 
     result = _.filter(this.state.db, (item) => { 
     if (item == rowData) 
      item.isSelected = false; 
     return item; 
     }); 
    } 

    this.setState({ 
     dataSource: this.state.dataSource.cloneWithRows(result), 
     db: result, 
     selectedContacts: this.selectedContactArray 
    }); 
    this.forceUpdate(); 
    } 

_renderRow（）

 _renderRow(rowData) { 
    return (
     <TouchableOpacity 
     onPress={() => this._handleSelectContact(rowData) } 
     style={{ 
      flexDirection: 'row', 
      backgroundColor: (rowData.isSelected) ? 'rgba(255,255,255,0.6)' : 'transparent' 
     }}> 
     <Image source={images.placeholder} style={styles.contactImage} /> 
     <View style={styles.contactContainer}> 
      <Text numberOfLines={2} style={styles.contactName}> 
      {rowData.familyName} {rowData.givenName} 
      </Text> 
     </View> 
     </TouchableOpacity> 
    ); 
    } 

Answer 1

我寫了一個簡單爲例選定/ ListView中取消選擇項，這裏是rnplay link可對其進行測試。我希望這可以幫助

var React = require('react-native'); 

var { 
    AppRegistry, 
    StyleSheet, 
    View, 
    Text, 
    Dimensions, 
    ListView, 
    TouchableOpacity 
} = React; 
var { 
    width, 
    height 
} = Dimensions.get('window'); 

var SelectDeselectExample = React.createClass({ 
    getInitialState: function() { 
    var ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2}); 
    var rows = this._genRows() 
    return { 
     dataSource: ds.cloneWithRows(rows), 
     selected:[] 
    }; 
    }, 
    _genRows : function(){ 
    var arr = [] 
    for(var i = 0;i< 10; i++){ 
     arr.push({title: 'item '+i}) 
    } 
    return arr 
}, 
_renderRow:function(row){ 
    var selected = this.state.selected.indexOf(row) > -1 
    return(
    <TouchableOpacity onPress = {(ev)=>{this.onRowPressed(row)}}> 
     <View style={{height:50,backgroundColor: selected ? 'red':'white',justifyContent:'center'}}> 
      <Text>{row.title}</Text> 
     </View> 
    </TouchableOpacity> 
) 
}, 
onRowPressed:function(row){ 
    var selected = this.state.selected.slice() 
    var rowIndex = selected.indexOf(row) 

    if(rowIndex > -1){ 
     //Remove Item from selected Array 
     selected.splice(rowIndex,1) 
    }else{ 
     //Add Item to selected array 
     selected.push(row) 
    } 
    this.setState({selected:selected}) 
}, 
render: function() { 
    return (
     <View style={styles.container}> 
     <ListView style={{flex:1,marginTop:20}} 
        dataSource={this.state.dataSource} 
        renderRow={this._renderRow}> 
     </ListView> 
     </View> 
    ); 
    } 
}); 

var styles = StyleSheet.create({ 
    container: { 
    flex: 1, 
    paddingTop:20 
    } 
}); 



AppRegistry.registerComponent('SampleApp',() => SelectDeselectExample);