加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 百科 > 正文

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

发布时间:2020-12-15 07:38:33 所属栏目:百科 来源:网络整理
导读:一 背景 效果图如下: 二 解决办法 我的目的是实现单选item,正常情况设置一个state变量来保存选中的Index,在每次点击item的时候改变index就OK!但是,我想的太天真了。this.setState()只能渲染外部组件,而ListView子组件却没有渲染。仔细想想确实有道理,

一 背景

效果图如下:

二 解决办法
我的目的是实现单选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": "工商银行","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之旅坑很多,选择这条路,注定要不断的跳,不断的填,希望大家坚持。谢谢各位!

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读