在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被調用時，它將使用該值（因爲它沒有將'i'的每個值綁定到每個onPress（））。

更好的解決方案是，您可以將另一個組件中的圖像組件提取出來，並將它傳遞給圖像源並在那裏處理onPress。

事情是這樣的：

您ImageComponent。將它的源碼，imageString和onPress函數作爲道具傳遞。

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。