关于RN listview item ref

原创 2016年11月16日 15:30:11

背景

在使用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的直接操作和ref/refs的使用

这里具体讲解了RN的setNativeProps的使用:http://www.jianshu.com/p/638c85b9bb66而在直接操作的过程中,对REFS的理解是不可缺少的。REF可以有两种形...

(十四)Reactnative中ref属相详解

在用Reactnative写工程时,默认奇妙的有一种像OC中,或者java 中或者当前类的私有属相的想法,state 和props都不能满足时,就是ref   它能达到其他语言中持有一个view组件...

RN之 ref和setNativeProps使用

1 ref属性不只是string  ref属性不仅接受string类型的参数,而且它还接受一个function作为 callback。这一特性让开发者对ref的使用更加灵活。 render() { ...

MIG_WG_Item_9_ref_ISA95-Ch3_Charlie_Gifford 2

  • 2013年04月12日 16:48
  • 3.11MB
  • 下载

RN listView使用

RN中的ListView是基于ScrollView扩展得来的,所以具有ScrollView的相关属性。 常用的属性: initialListSize:指定在组件刚挂载的时候渲染多少行数据。用这个属性...

点击ListView的item时显示隐藏view

  • 2013年02月01日 18:30
  • 1.3MB
  • 下载

Android在ListView中移除某个Item条目

我做了个bug就是说快捷启动里得到所有的应用程序,然后由于某些原因需要移除某个应用条目,我是这样做的: 1.使用这个工具类获取所有应用程序:public class ApkTool { st...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:关于RN listview item ref
举报原因:
原因补充:

(最多只允许输入30个字)