참조를 통해 반응 네이티브 listview 하위 구성 요소에 액세스하는 방법?

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 구성 요소 심판에 액세스 할 수있는 방법을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를 얻은 후에도 측정 방법에 액세스 할 수 없을 것입니다. onPress에와 터치 이벤트를 전달하고이 같은 페이지 X 및 페이지 Y를 얻기 위해 nativeEvent를 사용할 수있는 페이지 X 및 페이지 Y를 얻으려면, 당신은 방법을 measureInWindow 사용하여 폭과 높이를 얻을 수 있습니다 : -

은

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

방법 정의는 같은 수 this : -

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를 전달하기 만하면 도청 행을 얻을 수 있습니다. 실제로 행의 ListView 내부의 심판을 추가하는 문자열 방법을 통해 ListeView 당신이 ListView 심판을 참조 할 수 있도록 아이들과 아닌 Class 심판