当存在多个时，提高图像性能

Question

问题

我正在渲染多个图像(3-4)水平挑选从画廊使用react-native-image-picker。并使用base64字符串将它们放入<Image />。但在选择了第三张照片后，UI没有正确响应，并且滞后了这么多。我的android设备有4 4GB的内存。

我该如何改进这一点呢？

可重现的演示

constructor(props) {
    super(props)

    this.state = {
         Photos: [null, null, null]
    }

    this.renderPhotosView = this.renderPhotosView.bind(this)
    this.onPhotoSelect = this.onPhotoSelect.bind(this)
}

renderPhotosView() {

    var self = this
    var Photos = self.state.Photos

    return (
        <View style={{ flexDirection: 'row'}} >
            {
                Photos.map(function (photoBase64Data, i) {

                    return (
                        <TouchableOpacity
                            key={i}
                            onPress={() => {

                                ImagePicker.showImagePicker(options, (response) => {

                                    if (response.didCancel) {
                                        return
                                    }

                                    self.onPhotoSelect(i,  response.data)
                                })
                            }}
                            style={{
                                flex:  30,
                                backgroundColor: '#CCCCCC',
                                height: 100,
                                alignItems: 'center',
                                justifyContent: 'center',
                                margin: 5
                            }}
                        >
                            <View>
                                {
                                    (photoBase64Data == null) ?
                                    <Icon name="ios-add" /> :
                                    <Image

                                        source={{ uri: "data:image/jpeg;base64," + photoBase64Data }}
                                        style={{ height: 100, width: 100 }}
                                    />
                                }
                            </View>
                        </TouchableOpacity>
                    )
                })
            }
        </View>
    )
}

Answer 1

我也有同样的问题。我已经通过使用react-native-image-resizer调整所选图像的大小来解决了这个问题。

示例：

    ImagePicker.showImagePicker(options, (response) => {
    if (response.didCancel) {
        console.log('User cancelled image picker');
    } else if (response.error) {
        console.log('ImagePicker Error: ', response.error);
    } else if (response.customButton) {
        console.log('User tapped custom button: ', response.customButton);
    } else {
        const source = { uri: response.uri };

        ImageResizer.createResizedImage(source.uri, 600, 600, 'JPEG', 50, 0, null).then((resizedImageUri) => {

            // use resized image 
            this.newImage(resizedImageUri);
        }).catch((err) => {
        console.log(`error at resizing image: ${err}`);
        });
    }
    });