Как получить доступ к дочерним компонентам, относящимся к реестру, с помощью ref?

Question

как получить доступ к ответным данным listview дочерние компоненты через ref?

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, но я не понимаю, как они делают.

Answer 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>} 
     /> 

Но, скорее всего, даже после получения реф вы не сможете получить доступ к методу измерения. Для получения pageX и Пейджи вы можете передать сенсорное событие с onPress и использовать nativeEvent для получения pageX и Пейджи, как это, вы можете получить ширину и высоту, используя 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} 
    }); 
}); 
} 

Answer 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> 
    ); 
    } 
} 

ли то же самое понятие, как связь вас в курсе, но, может быть, таким образом, легче понять. Вместо того, чтобы пытаться получить строки из класса refs, вы создаете пустой массив в области класса и заполняете его строками при построении списка. Затем вы просто передаете идентификатор при нажатии на функцию пресса, и вы можете получить строку с нажатой клавишей. Они делают так же, как только углубляясь в listView реф, потому что на самом деле строки являются ListeView детьми, чтобы вы, чтобы обратиться к ListView рефам, а не вашим Class ссуд