如何通过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,但我不明白他们是怎么做的。
答案 0 :(得分:3)
您无法通过在ListView中添加引用的字符串方式访问引用,您必须使用回调技术来应用引用
var express = require('express');
var app = express();
var server = require('http').createServer(app);
var io = require('socket.io')(server);
var fs = require('fs');
app.use(express.static(__dirname + '/public'));
app.get('/galerie', function(req, res) {
res.sendFile(__dirname + '/galerie.html');
});
app.get('/', function(req, res) {
res.sendFile(__dirname + '/index.html');
});
//var io = require('socket.io').listen(http);
io.sockets.on('connection', function (socket, pseudo) {
...
});
server.listen(8080);
但很可能即使在获得参考后你也无法访问测量方法。要获取pageX和pageY,您可以使用onPress传递touch事件并使用nativeEvent来获取pageX和pageY,您可以使用measureInWindow方法获取宽度和高度: -
<ListView ref="listView"
dataSource={this.state.dataSource}
renderRow={(rowData) => <TouchableHighlight ref={(TouchableHighLight) => { this.button = TouchableHighLight; }} onPress={this.onTap.bind(this)}><Text>{rowData}</Text></TouchableHighlight>}
/>
方法定义可能是这样的: -
onPress={(event) => this.onTap(event)}
答案 1 :(得分:0)
你可以尝试这样的东西来访问被点击的元素:
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>
);
}
}
与您发布的链接具有相同的概念,但这种方式可能更容易理解。
您不是尝试从类refs获取行,而是在类范围中创建一个空数组,并在构建列表时用行填充它。然后你只需将一个id传递给按下功能,你就可以得到你的行。他们以同样的方式深入listView
引用,因为实际上行是ListeView
个孩子,所以你要引用ListView
引用,而不是你的Class
引用