React native 反应本机图像裁剪选择器显示图像

我正在使用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}}/>

---

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

以下是答案，使用react native modules.imagecropicker而不是

react native image croppicker

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,

    }
});

import React，{Component}来自'React'；
进口{
视图、文本、样式表、滚动视图、警报、，
图像、可触摸不透明度、本机模块、尺寸、状态栏、安全区域视图
}从“反应本机”；
从“./assets/Colors”导入{CarColors}；
var commonStyles=require（“../assets/style”）；
var ImagePicker=NativeModules.imagecropicker；
导出默认类应用程序扩展组件{
构造函数（）{
超级（）；
此.state={
图像：空，
图像：空
};
}
清理图像（）{
ImagePicker.clean（）。然后（（）=>{
//log（'从tmp目录中删除了tmp映像'）；
警报（“临时图像历史记录已清除”）
}).catch（e=>{
警报（e）；
});
}
pickMultiple（）{
ImagePicker.openPicker({
多重：对，
waitAnimationEnd:false，
includexif：是的，
是的，
})。然后（图像=>{
这是我的国家({
图像：空，
images:images.map（i=>{
console.log（'received image'，i）；
返回{uri:i.path，width:i.width，height:i.height，mime:i.mime}；
})
});
}).捕获（e=>警报（e））；
}
缩放高度（旧、旧、新）{
返回（旧/旧）*新；
}
渲染（图像）{
返回
}
渲染集（图像）{
if（image.mime&&image.mime.toLowerCase（）.indexOf（'video/'）！=-1）{
返回此.renderVideo（图像）；
}
返回此.renderImage（图像）；
}
render（）{
返回(
选择图像
干净的历史
{this.state.image？this.renderAsset（this.state.image）：null}
{this.state.images？this.state.images.map（i=>{this.renderAsset（i）}）：null}
{
这是国家形象&&
上传
}
);
}
}
const styles=StyleSheet.create({
容器：{
背景颜色：CarColors.white，
},
IMG容器：{
利润率：20
},
按钮：{
背景颜色：“蓝色”，
marginBottom:10，
},
正文：{
颜色：'白色'，
尺寸：20，
textAlign:“中心”
},
标题：{
fontWeight:'粗体'，
尺寸：22
},
安全区：{
玛金托普：20
},
日期容器：{
flexDirection:'行'，
},
IMG视图：{
宽度：“50%”，
玛吉：10，
}
});

您能检查一下这个@DevAS吗非常感谢，它似乎在工作。你救了我欢迎，你能写出正确的答案来帮助其他面临同样问题的人吗；）@我肯定会的