Question

我已经使用了一些示例来帮助我达到这一点，但我无法通过视图来显示列表更改。我有一个联系人列表，在select / 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中的selected / deselect项写了一个简单的例子，这里是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);

更新react-native listview

1 个答案: