关于RN listview item ref

背景

在使用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