React-Native 填坑之ListView(item更新)

一 背景

效果图如下：

二 解决办法
我的目的是实现单选item，正常情况设置一个state变量来保存选中的Index,在每次点击item的时候改变index就OK！但是，我想的太天真了。this.setState()只能渲染外部组件，而ListView子组件却没有渲染。仔细想想确实有道理，像anroid要改变item，还得调用adapter.notifyDataSetChanged(),所以，这里的原理也差不多。知道问题所在，就好解决了，这里只需要改变ListView的数据源，然后在每次调用的时候再配置给ListView，那么它就会重新去渲染了。

具体代码如下：

  /**  *数据源  **/    getListData() {        var dataSource = [            {                "bankId": 1,                "bankName": "建设银行",                "bankType": "存储卡",                "bankNum": "**** **** **** 5745",                "code": "jsyh"            },            {                "bankId": 2,                "bankName": "工商银行",                "bankType": "存储卡",                "bankNum": "**** **** **** 5845",                "code": "gsyh"            }        ];        return dataSource;    }/***点击Item时调用的方法**/  onPressRow(rowData, sectionID, rowID) {        let newData = this.getListData();        newData[rowID].isSelected = !newData[rowID].isSelected;//重点在这里，给数据源动态添加一个isSelected属性。        this.setState({            selectIndex: rowData.bankId,            dataSource: this.state.dataSource.cloneWithRows(newData)        });    }

注意
上面的方法只适合静态数据，如果是从网上加载的数据，还是不能解决浅拷贝问题，可以使用第三方库lodash来解决，npm地址：https://www.npmjs.com/package/lodash
使用方法:

import _ from 'lodash';//导入let newData =_.cloneDeep(this.data);//这里就是关键了，深拷贝

三 结束语

当然这种情况解决办法有很多，网上提供了些更好的方法，我这里只是拙见，希望大家多多提意见。另外，React Native之旅坑很多，选择这条路，注定要不断的跳，不断的填，希望大家坚持。谢谢各位！