如何通过 ref 访问 react-native listview 子组件？答案

【问题标题】：how to access react-native listview child components through ref?如何通过 ref 访问 react-native listview 子组件？
【发布时间】：2017-01-18 12:33:11
【问题描述】：

如何通过 ref 访问 react-native listview 子组件？

class MyComponent extends Component {
  constructor() {
    super();
    const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
    this.state = {
      dataSource: ds.cloneWithRows(['row 1', 'row 2', 'row 3', 'row 4', 'row 5', 'row 6']),
    };
  }

  onTap() {
    console.log(this.refs)
    /* After getting touchComponent refs below block of code has to be executed.
    that.refs.touchComponent.measure((ox, oy, width, height, px, py) => {
    this.setState({
       isVisible: true,
       buttonRect: {x: px, y: py, width: width, height: height}
    });
  });
  */
 }

  render() {
    return (
      <ListView ref="listView"
        dataSource={this.state.dataSource}
        renderRow={(rowData) => <TouchableHighlight ref="touchComponent" onPress={this.onTap.bind(this)}><Text>{rowData}</Text></TouchableHighlight>}
      />
    );
  }
}

console.log(this.refs) 打印 Object {listView: Object}

如何访问TouchableHighlight 组件引用？

我经历了React Native: Refs in ListView 和React Native - get refs of custom components in listview from renderRow，但我不明白他们是怎么做的。

【问题讨论】：

标签： react-native react-native-listview

【解决方案1】：

你不能通过在ListView中添加引用的字符串方式访问引用，你必须使用回调技术来应用引用

 <ListView ref="listView"
        dataSource={this.state.dataSource}
        renderRow={(rowData) => <TouchableHighlight ref={(TouchableHighLight) => { this.button = TouchableHighLight; }} onPress={this.onTap.bind(this)}><Text>{rowData}</Text></TouchableHighlight>}
      />

但很可能即使在获得 ref 之后，您也无法访问 measure 方法。要获取 pageX 和 pageY 可以通过 onPress 传递触摸事件，使用 nativeEvent 获取 pageX 和 pageY 像这样，可以使用 measureInWindow 方法获取宽度和高度：-

onPress={(event) => this.onTap(event)}

方法定义可能是这样的：-

onTap(evnt) {
  var py=evnt.nativeEvent.pageY
  var px=evnt.nativeEvent.pageX
  console.log(this.refs)
this.button.measureInWindow(x,y,width,height)
  this.setState({
       isVisible: true,
       buttonRect: {x: x, y: y, width: width, height: height}
  });
});
}

【讨论】：

【解决方案2】：

你可以尝试这样的方式来访问被点击的元素：

import React, { Component } from 'react'
import {
  Text,
  ListView,
  TouchableHighlight,
  View,
} from 'react-native';

export default class App extends Component {
  constructor() {
    super();
    this.buildList = this.buildList.bind(this)
    this.onTap = this.onTap.bind(this)

    const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
    this.rows = []
    this.state = {
      dataSource: ds.cloneWithRows([
        {id: 0, text: 'row 1'},
        {id: 1, text: 'row 2'},
        {id: 2, text: 'row 3'},
        {id: 3, text: 'row 4'},
        {id: 4, text: 'row 5'},
        {id: 5, text: 'row 6'}

      ]),
    };
  }

  onTap(id) {
    console.log(this.rows[id])
 }

  buildList (data) {
    const onRowTap = () => this.onTap(data.id)
    return (
      <TouchableHighlight key={data.id} ref={row => this.rows[data.id] = row} onPress={onRowTap}>
          <Text style={{color: '#000', padding: 20}}>{data.text}</Text>
      </TouchableHighlight>
    )
  }

  render() {
    return (
      <View>
        <ListView style={{marginTop: 50}} ref="listView"
          dataSource={this.state.dataSource}
          renderRow={this.buildList}
        />
      </View>
    );
  }
}

与您发布的链接的概念相同，但也许这种方式更容易理解。与其尝试从类引用中获取行，不如在类范围内创建一个空数组，并在构建列表时用行填充它。然后，您只需将一个 id on tap 传递给 press 功能，您就可以让您点击行。他们以同样的方式深入listView refs，因为实际上这些行是ListeView 子代，所以你参考ListViewrefs 而不是你的Classrefs

【讨论】：