refを介して反応ネイティブのリストビューの子コンポーネントにアクセスする方法は？

Question

どのように反応するネイティブ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)私はTouchableHighlightコンポーネントREFにアクセスすることができますどのように印刷さObject {listView: Object}

？

私は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>} 
     /> 

しかし、おそらくrefを取得した後でさえ、測定方法にアクセスすることはできません。 pageXとpageYは、あなたがたonPressでタッチイベントを渡すと、このようなpageXとpageYを取得するためにnativeEventを使用することができ、あなたが方法を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から行を取得しようとするのではなく、クラススコープで空の配列を作成し、リストを作成する際に行を埋めます。次に、あなたは単にプレス機能にIDを渡すだけで、あなたはタップされた行を得ることができます。実際に行がリストビュー内のREFを追加する文字列道経由ListeViewあなたはListView参照文献を参照するので、子供ではなく、あなたのClassレフリー