React Native: ID auf eine Komponente setzen und die ID dieser Komponente erhalten

Question

Ich entwickle meine erste React Native App und ich versuche, eine ID zu einer Komponente zu setzen, so dass ich diese Ansicht bestimmen kann, wenn ich darauf drücke und Daten anzeigen auf die ID der Komponente

das ist, was ich bisher versucht:

renderRow(rowData, sectionID, rowID){ 
    var past_matches_circles =[]; 
    for(var i=0; i<isPast; i++){ 
    past_matches_circles.push(
     <TouchableOpacity id={i} key = {i} collapsable={false} style={styles.small_circle} onPress={()=>this.pressOnCircle(rowData[`${i}`].MatchID)}> 
     </TouchableOpacity> 
    ); 
    } 
    return (
    <View> 
     <View style={{flexDirection:'row'}}> 
     {past_matches_circles} 
     </View> 
     <View style={{flexDirection:'row'}}> 
     <Image style={{width:100, height:100, margin:5}} source={{uri:'http://facebook.github.io/react/img/logo_og.png'}}/> 
     <View style={{justifyContent:'center', flex:1}}> 
      <Text> {rowData[0].MatchDate} </Text> 
      <Text> {rowData[0].HomeTeam} VS {rowData[0].AwayTeam} </Text> 
     </View> 
     </View> 
    </View> 
); 
} 
pressOnCircle(i){ 
    ToastAndroid.show('key ' + i, ToastAndroid.SHORT); 
} 

aber leider ist der Iterator i Wert immer gleich, unabhängig zu seinem letzten Wert innerhalb der Schleife, die ich an Drücken anzuzeigen.

Kann mir jemand helfen, die ID von Komponenten zu bekommen?

Answer 1

Nach mehreren Tagen, endlich habe ich dieses Problem gelöst. Und ich poste es für, wer zu dieser Frage kommen wird.

Ich drängte die Ansichten in mein Array ohne zurück, so dass der Wert i immer gleich ist.

so dass das, was ich getan habe:

renderCircle(id) { 
    return <TouchableOpacity key={id} style={styles.small_circle} onPress={() => this.pressOnCircle(id)}> 
     </TouchableOpacity>; 
} 
renderRow(rowData, sectionID, rowID){ 
    var past_matches_circles =[]; 
    for(var i=0; i<isPast; i++){ 
    past_matches_circles.push(
     this.renderCircle(i) 
    ); 
    } 
    var { page, animationsAreEnabled } = this.state; 
    return (
    <View> 
     <View style={{flexDirection:'row'}}> 
     {past_matches_circles} 
     </View> 
     <View style={{flexDirection:'row'}}> 
     <Image style={{width:100, height:100, margin:5}} source={{uri:'http://facebook.github.io/react/img/logo_og.png'}}/> 
     <View style={{justifyContent:'center', flex:1}}> 
      <Text> {rowData[0].MatchDate} </Text> 
      <Text> {rowData[0].HomeTeam} VS {rowData[0].AwayTeam} </Text> 
     </View> 
     </View> 
    </View> 
); 
} 

Hoffnung, die helfen.

Answer 2

Sie können .bind verwenden, um eine neue Funktion zu erstellen, die über den Wert i schließt. Dies ist nicht die beste Leistung, da Sie jedes Mal eine neue Funktion erstellen.

onPress={ this.pressOnCircle.bind(this, i) }> 

Auch könnte man so etwas wie

this.pressOnCircle = this.pressOnCircle.bind(this); 

Im Konstruktor zu bekommen den richtigen this Kontext, in dem Handler tun müssen.