Question

我正在实现图像上传，用户可以选择多个图像。选择图像后，我想显示一个加载指示器，通知用户文件正在上传，一旦图像上传，就删除加载指示器。

为此，我创建了ImageUploader组件，其职责是接收图像，将其上载到服务器，上载显示加载指示器以及上载完成删除加载指示器。

这是UI的外观。

以上参考中的每个缩略图都是一个ImageUpload组件，这是用户选择图像后的外观。

这是我用来实现这一目标的代码。

import React, { Component } from 'react';
import { View, SafeAreaView } from 'react-native';
import ImagePicker from 'react-native-image-crop-picker';
import ImageUploader from '../components/ImageUploader';

export default class ItemDetailScreen extends Component {

    state = {
        images: []
    }

    didPressActionSheetOption(index) {
        ImagePicker.openPicker({
            multiple: true,
            mediaType: "photo"
        }).then(images => {
            const _images = [];
            images.map(image => {
                _images.push(<ImageUploader image={image}/>);
            });
            this.setState({
                images: [..._images, ...this.state.images]
            });
        });
    }

    render() {
        return (
            <SafeAreaView style={{flex: 1}}>
                <View>
                    // Rendering code removed clarity
                </View>
                <ActionSheet
                    ref={o => this.ActionSheet = o}
                    options={['Camera', 'Gallery', 'Cancel']}
                    cancelButtonIndex={2}
                    onPress={(index) => { this.didPressActionSheetOption(index) }}
                />
            </SafeAreaView>
        );
    }
}

这是ImageUploader组件的代码。

import React, { Component } from 'react';
import { View, ActivityIndicator, TouchableOpacity } from 'react-native';
import { ms } from 'react-native-size-matters';
import FastImage from 'react-native-fast-image';
import { uploadMedia } from '../utils/ApiService';

export default class ImageUploader extends Component {

    state = {
        uploading: true
    }

    componentDidMount() {
        this.processFileUpload();
    }

    processFileUpload() {
        this.setState({
            uploading: true
        });
        uploadMedia({
            id: 'user_profile_picture',
            media: this.props.image,
            onUploadComplete: (response) => {
                this.setState({
                    uploading: false
                });
            }
        });
    }

    render() {
        return (
            <>

                <TouchableOpacity style={{marginRight: ms(10), borderRadius: ms(10), overflow: 'hidden'}}>
                    <FastImage
                        style={{width: ms(75), height: ms(75), borderRadius: ms(10)}}
                        source={{
                            uri: this.props.image.path
                        }}
                    />
                    {true === this.state.uploading &&
                        <View style={{position: 'absolute', top: 0, left: 0, right: 0, bottom: 0, backgroundColor: 'rgba(0, 0, 0, 0.65)', alignItems: 'center', justifyContent: 'center', borderRadius: ms(10)}}>
                            <ActivityIndicator size="large" color="#fff" style={{transform: [{scale: 0.8}]}}/>
                        </View>
                    }
                </TouchableOpacity>
            </>
        )
    }
}

这在用户首次选择图像时有效，但是我的问题是，当用户下次选择图像时，加载指示符显示的是上次上传的图像，而不是新上传的图像。

例如，假设用户第一次上传图片1、2、3和4，此处的加载指标非常理想，现在用户再次选择更多图片，这次是5＆6，我希望指标能够在5＆6上显示，但在3＆4上显示。

我在哪里错了？

致谢。

将本机组件存储在数组中

0 个答案: