Wie reactive-native Listenansicht untergeordnete Komponenten durch ref zugreifen?

Question

wie reagiere native listview kind komponenten durch 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)drucktObject {listView: Object}

wie i TouchableHighlight ref Komponente zugreifen kann?

ich durch React Native: Refs in ListView und React Native - get refs of custom components in listview from renderRow gegangen, aber ich verstehe nicht, wie sie tun.

Answer 1

Sie kippe Zugang Refs durch den Strang Art und Weise von Refs innerhalb Listview hinzufügen, die Sie hat die Callback-Technik verwenden refs

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

Aber höchstwahrscheinlich auch anzuwenden, nachdem Sie nicht in der Lage sein, die Maßnahme Methode Zugriff auf die ref zu bekommen. Erhalten pageX und pageY Sie können den Touch-Event mit dem onPress passieren und verwenden nativeEvent die pageX und pageY wie diese zu erhalten, können Sie Breite und Höhe erhalten Methode measureInWindow: -

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

Methodendefinition könnte so etwas wie dies: -

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

Sie können so etwas wie dies versuchen, das Element zugreifen angezapft:

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

Ist das gleiche Konzept wie der Link, den Sie geschrieben, aber vielleicht diese Art und Weise ist leichter zu verstehen. Anstatt zu versuchen, Zeilen aus Klassenreferenzen zu erhalten, erstellen Sie ein leeres Array im Klassenbereich und füllen es beim Erstellen der Liste mit Zeilen. Dann geben Sie einfach eine ID an die Druckfunktion und Sie erhalten eine Tippzeile. Sie haben die gleiche Art und Weise tief einfach weiter in die listView Refs weil tatsächlich die Reihen sind ListeView Kinder, so dass Sie auf die ListView Refs beziehen und nicht Ihre Class Refs