关于RN listview item ref
来源:互联网 发布:海门java培训 编辑:程序博客网 时间:2024/05/16 05:05
背景
在使用React Native的过程中,使用ListView渲染一个列表时,有时候需要操作item中某个控件,比如调用该控件的某个方法,我们知道要调用方法之前需要获取到该控件的对象引用,那么我们就开始尝试获取控件的引用对象。
项目中的实际场景是:有一个电影观看历史列表,列表的每一行有个复选框CheckBox,勾选这一行的复选框后支持删除操作,虽然每一行的单独操作可以实现勾选/取消功能,但是同时又要实现全选/反选操作,这时候当点击全选按钮后,需要遍历每一个item中的CheckBox进行勾选操作来实现全选功能。
遇到的问题
获取控件的引用对象,在RN是使用ref来获取的,ListView->renderRow,这是渲染每一行的代码
renderRow={this._renderMovieView.bind(this)}
_renderMovieView方法
_renderMovieView(movie){ return( <CheckBox ref="myCheckBox" > </CheckBox>)}
movie是每一行的电影数据结构对象,CheckBox组件有一个check(isChecked)方法
如果我们像上面那样来定义ref,这时候,通过下面的方式来获取CheckBox对象引用
this.refs.myCheckBox.check(true)
这样你会发现,永远只有最后一个有响应,这是因为每一行item的CheckBox的ref名称是相同的,导致只有最后渲染的那一行的CheckBox的ref是有效的。那么,我们就想为每一行CheckBox定义唯一的ref
_renderMovieView(movie){ return( <CheckBox ref={`myCheckBox${movie.id}`} > </CheckBox>)}
需要注意的是这里的引号是反引号(键盘左上角1键左边的那个键),不是单引号也不是双引号
这里movie有个id属性,通过movie的id唯一性来定义CheckBox ref的唯一性,这样我们理所当然的可以像上面的方法来获取引用对象
假设有个movie.id=1
this.refs.myCheckBox1.check(true)
这时候问题就来了,会报undefined错误!我的第一直觉告诉我怎么可能会这样!(到现在我也不知道为什么会这样,有知道的可以告诉我下,毕竟我也是刚开始学习的,不懂的很多)。然后,我试着打印出this.refs,里面确实是空,什么也没有,自然就undefined了,无解。。。换个方法。。。
解决方案
上面提出问题的那个方法,是RN定义ref 的其中一种方式,另一种方式还可以这样
<CheckBox ref={(box)=>{ this.myCheckBox=box; }} ></CheckBox>
那么就可以使用myCheckBox对象了
this.myCheckBox.check(true);
接下来我们的解决方案就是使用这种方式
var CheckBoxRefs = {};_renderMovieView(movie){ return( <CheckBox ref={(box)=>{ CheckBoxRefs[`myCheckBox${movie.id}`]=box; }} > </CheckBox>)}
定义了一个CheckBoxRefs map(key/value)对象,CheckBoxRefs的key是唯一名称,value是CheckBox引用对象(实例),然后在使用的时候如下
for (var key in CheckBoxRefs){ var item = CheckBoxRefs[key]; if(item){ item.check(true); }}
这样就实现了CheckBox全选的功能了。
react native 的issues上还提供了另一种解决方案,但我还没有验证过,有兴趣的可以去看看 Get refs to ListView rows
如果想看本章内容的完整实现代码,可以到我的github查看ViewsHistoryScene.js
- 关于RN listview item ref
- 关于RN的直接操作和ref/refs的使用
- 关于ListView中item问题
- RN ListView 列表
- RN listView使用
- RN的listview Demo
- RN实现ListView
- 关于Android的ListView的Item选中
- 关于ListView中Item的高度问题
- android 关于ListView Item数据混乱问题
- android 关于ListView Item数据混乱问题
- 关于ListView中Item的高度问题
- 关于listview加载多种item的解决方案
- 关于ListView如何移动其Item
- 关于ListView中Item的操作
- Android关于listview item无响应
- ListView关于Item高度的诡异问题
- 关于设置ListView的Item多布局
- 如何解决源代码的链接问题?
- js 数组方法总结归类
- Python之抓取股票信息,单继承,多继承,方法
- Spring在web应用中使用?
- WM_SETCURSOR消息
- 关于RN listview item ref
- CSS position绝对定位absolute relative
- poj 1006 Biorhythms (中国剩余定理)
- Cron表达式例子
- android 感应器
- Http请求响应--发短信
- Windows下搭建PHP开发环境
- Manacher----最长回文子串
- smarty基础概念总结