有多个时提高Image的性能

Question

问题

我正在使用react-native-image-picker渲染从图库中水平挑选的多个图像（3-4）。并使用base64字符串将它们放到<Image />。但是在选择第三张照片之后，UI没有正确响应并且滞后这么多。我的Android设备有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}`);
        });
    }
    });