React Native Referenz wird stattdessen an Wert übergeben in JSX, Element Array

Question

Ich bin neu zu Reagieren nativ, so könnte dies eine Art dumme Frage sein. Also versuche ich eine Fotogallerie-App in React Native zu machen. Ich lese Links von einer Webseite im JSON-Format und zeige sie in der Galerie an. Jetzt verwende ich ein JSX.Element-Array, um das Format der Thumbnails in der Galerie und in I zu speichern und TouchableHighlight zum Aufrufen einer Funktion in der onPress-Eigenschaft zu verwenden.

 tempImageArray.push(
     <TouchableHighlight onPress={()=>this._onPressButton(indexNumber)}>    
     <Image source={{uri : this.state.dataSource}}/> 
     </TouchableHighlight>); 

Jetzt ist das Problem, dass ich mit Blick auf bin, ist, dass, wenn ich die _OnPressButton Funktion reagiert auf den aktuellen Wert von indexNumber statt auf dem berührbaren Elemente tippen, was es zum Zeitpunkt der war es in der Anordnung schieben. Ich vermute also, dass die Referenz von indexNumber an das Array anstatt an seinen Wert übergeben wird. Ich möchte den Wert von indexNumber übergeben.

Answer 1

Angenommen, Sie wiederholen auf push Operation. Wenn ja - es ist ein klassisches Javascript-Schließungsproblem. Bitte stellen Sie mehr Code zur Verfügung, damit Sie leichter in den Kontext springen und Ihre Snippets ausführen können. Alles unten ist Pseudocode-Beispiele.

Verwenden Autorun anonyme Funktion indexNumber in einem Verschluss zu speichern:

tempImageArray.push(
    <TouchableHighlight onPress={((storedNumber)=> (event) => this._onPressButton(storedNumber))(indexNumber)}>    
    <Image source={{uri : this.state.dataSource}}/> 
    </TouchableHighlight>); 

Oder, um es leichter zu lesen und zu pflegen, Handler Erstellung in einem separaten Verfahren einzuzukapseln:

 _makePressButtonHandler = (indexNumber) => (event) => { 
     this._onPressButton(indexNumber) 
    } 
    _onPressButton = (indexNumber) => { 
     // ...do something 
    } 

    // somewheare in render method: 

    tempImageArray.push(
     <TouchableHighlight onPress={this._makePressButtonHandler(indexNumber)}>    
     <Image source={{uri : this.state.dataSource}}/> 
     </TouchableHighlight>);