ReactNative系列之十六listview中子元素变更checkbox

最新推荐文章于 2025-01-12 12:11:12 发布

叶菩提

最新推荐文章于 2025-01-12 12:11:12 发布

阅读量999

点赞数

CC 4.0 BY-SA版权

分类专栏： ReactNative跨平台文章标签： ReactNative listView ListView不刷新

本文链接：https://blog.youkuaiyun.com/yeputi1015/article/details/72235491

ReactNative跨平台专栏收录该内容

73 篇文章

订阅专栏

本文介绍了在ReactNative中使用ListView时遇到的刷新问题及其解决方案。针对特定子项更新时整个ListView无法响应的情况，提供了一种通过克隆并替换数据源的方法来强制刷新，并讨论了性能考量。

实现效果，先上图。主要解决了几个问题

1、在ReactNative中变使用listview，但变更listview中的某一item子元素时，设置listview的dataSource将无法刷新子item元素，解决变法为：

                for (var i=0; i<this.state.dataSourceArray.length; i++) {
                    let key = i;
                    this.state.dataSourceArray[key].isSelected = true;
                }
                var newTabs = JSON.parse(JSON.stringify(this.state.dataSourceArray));
                this.state.dataSource = this.state.dataSource.cloneWithRows(newTabs ? newTabs : []);

2、这个界面大体上有四层，最上面一层的navbar先不看，第二层是顶部“编辑”条和下方“全选”，第三层为ListView第四层为ListViewItem.将上层属性传给子元素变更使用，在子页面调用此方法，能够获取到将要改变的元素的属性，使用this.props获取到的是老属性值

    shouldComponentUpdate(nextProps) {
        console.log("shouldComponentUpdate----------" + nextProps.selectAllItem);

3、把握好这两个关键点，做这种深层次的交互组件，问题应该不大。不过由于会刷新整个item，效率上会存在一定的问题，所以Listview的元素不适合太大的情况