Wie nativeProps eingestellt innerhalb eines Arrays reagieren - Reagieren india

Question

Was ich versuche zu tun

Ich versuche, eine Reihe von Animated.View Elementen zu erzeugen, die durch das Setzen nativeProps bewegt werden. Ich habe dies aus Geschwindigkeitsgründen gewählt.

Das Problem

Während Komponenten mit nativeProp refs direkt in dem Verfahren machen Platzieren unproblematisch, sind nicht refs erfasst, wenn sie in einem Array sind.

Beispiel

componentWillMount: function() { 

    this.arrayOfElements = []; 

    this.exampleView1.nativeProps = (null : ?{ setNativeProps(props: Object): void }); 
    this.exampleView2.nativeProps = (null : ?{ setNativeProps(props: Object): void }); 

    var key1 = "Example View 1" 
    var key2 = "Example View 2" 

    this.arrayOfElements.push(
     <Animated.View key={key1} ref={(nativeProps) => { this.exampleView1.nativeProps = nativeProps }} > 
      <Shape /> 
     </Animated.View> 
    ); 

    this.arrayOfElements.push(
     <Animated.View key={key2} ref={(nativeProps) => { this.exampleView2.nativeProps = nativeProps }} > 
      <Shape /> 
     </Animated.View> 
    ); 
}, 

componentDidMount: function() { 
    console.log(this.exampleView1.nativeProps); // null --> Means the component was *not* mounted 
    console.log(this.exampleView2.nativeProps); // void function --> Means the component was mounted 
}, 

render: function() { 
    <View> 
     {this.arrayOfElements} 
    </View> 
}, 

Ich habe nicht genug Erfahrung in JSX zu verstehen, warum dies so ist, aber es ist wichtig, dass ich eine JSX Schleife mit Refs erstellen, die mir erlauben nativeProps einzustellen. Jede Hilfe würde sehr geschätzt werden!

Answer 1

Ich habe immer noch keine Ahnung, warum das ursprüngliche Problem auftritt, aber Refs können korrekt mit der Kartenmethode geladen werden. Als Beispiel:

render: function() { 
    var arrayOfRefs = ['exampleView1', 'exampleView2']; 
    return(
     <View> 
      {this.arrayOfRefs.map((name, index) => (
       <Animated.View key={name} ref={(nativeProps) => { this[name].nativeProps = nativeProps }} > 
        <Shape /> 
       </Animated.View> 
      ))} 
     </View> 
    ); 

},