在 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>
            );
      }
}

但是发生的情况是总是打开 foo 循环的最后一个图像。无论点击哪个图像。如果我将迭代器 i 作为参数提供给新页面并记录它，我总是得到 199。我做错了什么？

Answer 1

这是因为当 onPress() 被调用时，它会获取变量“i”的值。由于您正在使用该变量进行循环，因此它将一直到最后一个值。所以当 onPress 被调用时，它会使用那个值（因为它没有将 'i' 的每个值绑定到每个 onPress()）。

更好的解决方案是在另一个组件中提取图像组件并将其传递给图像源并在那里处理 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。