React forループのonPress関数ネイティブナビゲーション

Question

私はReact Nativeでイメージギャラリーを作ろうとしています。

私が現在持っていることは、このようになりますサイトです。 imageView

画像は、このような配列で必要とされている唯一の9テスト画像です：私は今、欲しい

var imagesLoaded = 
[ 
     require('./image_1.jpg'), 
     require('./image_2.jpg'), 
     require('./image_3.jpg'), 
     require('./image_4.jpg'), 
     require('./image_5.jpg'), 
     require('./image_6.jpg'), 
     require('./image_7.jpg'), 
     require('./image_8.jpg'), 
     require('./image_9.jpg') 
]; 

タップされた画像だけを黒い背景にして新しいページを開くことになる画像をタップすることである。

この

はギャラリーのためのコードです：

class ImageView extends Component 
{ 
     static navigationOptions = 
     { 
      title: 'ImageView', 
     }; 

     render() 
     { 
      const { navigate } = this.props.navigation; 

      var images = []; 

      for (var i = 0; i < 200; i++) 
      { 
        var imageString = 'Image #' + (i+1); 

        images.push(
         <TouchableHighlight key={i} onPress={() => navigate('ImageTap', {imageSrc: imagesLoaded[i%9]})}> 
           <View style={styles.imageContainer}> 
            <Image source={imagesLoaded[i%9]} style={styles.images}/> 
            <Text style={styles.imageText}>{imageString}</Text> 
           </View> 
         </TouchableHighlight> 
       ) 
      } 

      return (
        <ScrollView> 
         <View style={{flex: 1, flexDirection: 'row', flexWrap: 'wrap', justifyContent: 'center'}}> 
           {images} 
         </View> 
        </ScrollView> 
      ); 
     } 
} 

そして、これが開くようになっている新しいページのコードです：

class ImageTap extends Component 
{ 
     static navigationOptions = 
     { 
      title: 'ImageView', 
     }; 

     render() 
     { 
      const { params } = this.props.navigation.state; 

      return (
        <View style={{backgroundColor: 'black', flex: 1, flexDirection: 'row', justifyContent: 'center', alignItems: 'center'}}> 
         <Image source={params.imageSrc} style={{flex: 1}}/> 
        </View> 
      ); 
     } 
} 

しかし、何が起こるかはその常に最後の画像でありますのループが開かれる。どのイメージがタップされているかにかかわらず、新しいページにイテレータiをパラメータとして渡してログすると、私は常に199を取得します。何が間違っていましたか？

Answer 1

これは、onPress（）が呼び出されたときに変数 'i'の値が使用されるためです。その変数を使用してループしているので、最後の値まで移動します。したがって、onPressが呼び出されると、その値を使用します（各onPress（）に 'i'の各値をバインドしないため）。

他のコンポーネントで画像コンポーネントを抽出し、画像ソースを渡してonPressを処理する方がよい場合があります。このような

何か：

あなたImageComponent。 source、imageString、onPress関数をpropsとして渡します。

const GalleryImage = ({ source, imageString, onPress }) => { 
    return (
     <TouchableHighlight onPress={onPress(src)}> 
      <View style={styles.imageContainer}> 
       <Image source={source} style={styles.images}/> 
       <Text style={styles.imageText}>{imageString}</Text> 
      </View> 
     </TouchableHighlight> 
    ); 
}; 

const styles = { 
    imageContainer: { 
    .... 
    }, 
    images: { 
    .... 
    }, 
    imageTex: { 
    .... 
    } 
} 

export default GalleryImage; 

あなたImageViewのコンポーネント

import GalleryImage from './GallerImage'; 

class ImageView extends Component { 

    constructor(props) { 
     super(props); 
     this.handleNavigation = this.handleNavigation.bind(this); 
    } 

    static navigationOptions = { 
     title: 'ImageView', 
    }; 

    handleNavigation(source) { 
     this.props.navigation.navigate('ImageTap', {imageSrc: source}); 
    } 

    renderGalleryImages() { 
     return imagesLoaded.map(
      (src, i) => { 
       <GalleryImage 
        key={i}, 
        source={src}, 
        imageString = {'Image #' + (i+1)}, 
        onPress= {this.handleNavigation} 
       /> 
      } 
     ); 
    } 

    render() { 
     return (
       <ScrollView> 
        <View style={{flex: 1, flexDirection: 'row', flexWrap: 'wrap', justifyContent: 'center'}}> 
          {this.renderGalleryImages()} 
        </View> 
       </ScrollView> 
     ); 
    } 
} 

また、より良いものなどの要素のキーとしてインデックスを使用しない項目がリストに移動した場合の性能を傷つけるかもしれません：https://facebook.github.io/react/docs/reconciliation.html#recursing-on-children。