react-native-image-crop-picker 显示图像

Question

我正在使用 react-native-image-crop-picker 上传多张图片。我已经使用以下代码来做到这一点

ImagePicker.openPicker({
      multiple: true
    }).then(images => {
      this.setState({
          avatarSource: images,
    });
});

当被选中的图片会收到这个数组

[{"height": 1280, "mime": "image/jpeg", "modificationDate": "1572089089000","path": "file:///data/user/0/com.carup/cache/react-native-image-crop-picker/image-ed1c260f-ee73-4ec0-932b-167e9771d24f.jpg",
         "size": 199376, "width": 960}]

我尝试使用以下代码显示选定的图像（在 android 中）

<Image style={{marginTop:10,height:150, resizeMode:'contain'}} source={{uri:avatarSource.path}}/>

但它不会显示图像。如何显示选定的图像？

Answer 1

这里是答案，使用 react-native NativeModules.ImageCropPicker 而不是 react-native-image-crop-picker

    import React, {Component} from 'react';
    import {
        View, Text, StyleSheet, ScrollView, Alert,
       Image, TouchableOpacity, NativeModules, Dimensions, StatusBar, SafeAreaView
    } from 'react-native';
    import {CarColors} from "../assets/Colors";
    
    var commonStyles = require('../assets/style');
    var ImagePicker = NativeModules.ImageCropPicker;
    
    
    export default class App extends Component {
    
        constructor() {
            super();
            this.state = {
                image: null,
                images: null
            };
        }
    
        cleanupImages() {
            ImagePicker.clean().then(() => {
                // console.log('removed tmp images from tmp directory');
                alert('Temporary images history cleared')
            }).catch(e => {
                alert(e);
            });
        }
    
        pickMultiple() {
            ImagePicker.openPicker({
                multiple: true,
                waitAnimationEnd: false,
                includeExif: true,
                forceJpg: true,
            }).then(images => {
                this.setState({
                    image: null,
                    images: images.map(i => {
                        console.log('received image', i);
                        return {uri: i.path, width: i.width, height: i.height, mime: i.mime};
                    })
                });
            }).catch(e => alert(e));
        }
    
        scaledHeight(oldW, oldH, newW) {
            return (oldH / oldW) * newW;
        }
    
        renderImage(image) {
            return <Image style={{width: 200, height: 200, resizeMode: 'contain'}} source={image}/>
        }
    
        renderAsset(image) {
            if (image.mime && image.mime.toLowerCase().indexOf('video/') !== -1) {
                return this.renderVideo(image);
            }
    
            return this.renderImage(image);
        }
    
        render() {
            return (
                <SafeAreaView style={styles.safeArea}>
    
                    <View style={styles.container}>
                        <StatusBar
                            backgroundColor={CarColors.primary}
                            barStyle="light-content"/>
                        <TouchableOpacity onPress={this.pickMultiple.bind(this)} style={commonStyles.button}>
                            <Text style={commonStyles.text}>Select Images</Text>
                        </TouchableOpacity>
                        <TouchableOpacity onPress={this.cleanupImages.bind(this)} style={commonStyles.button}>
                            <Text style={commonStyles.text}>Clean History</Text>
                        </TouchableOpacity>
                    </View>
    
                    <ScrollView style={styles.imgContainer}>
                        {this.state.image ? this.renderAsset(this.state.image) : null}
                        {this.state.images ? this.state.images.map(i => <View style={styles.imgView}
                                                                              key={i.uri}>{this.renderAsset(i)}</View>) : null}
                        {
                            this.state.images &&
                            <TouchableOpacity onPress={this.cleanupImages.bind(this)} style={commonStyles.bottomBtn}>
                                <Text style={commonStyles.text}>Upload</Text>
                            </TouchableOpacity>
                        }
                    </ScrollView>
    
    
                </SafeAreaView>
            );
        }
    }
    
    const styles = StyleSheet.create({
        container: {
            backgroundColor: CarColors.white,
        },
        imgContainer: {
            marginVertical: 20
        },
        button: {
            backgroundColor: 'blue',
            marginBottom: 10,
        },
        text: {
            color: 'white',
            fontSize: 20,
            textAlign: 'center'
        },
        title: {
            fontWeight: 'bold',
            fontSize: 22
        },
        safeArea: {
            marginTop: 20
        },
        dateContainer: {
            flexDirection: 'row',
        },
        imgView: {
            width: '50%',
            marginVertical: 10,
    
        }
    });