ReactNative笔记之图片相关操作------2

RN中打开相册选择图片使用CameraRoll组建，但是没有提供编辑的操作，我们在开发过程中一般使用一个第三方开发库【react-native-image-crop-picker】，下面介绍下iOS 端的使用方法。
集成
1、npm install react-native-image-crop-picker -save 导入库
2、导入SDK
Cocapods：在pod中添加’pod’RSKImageCropper’ 和 ‘pod’QBImagePickerController’
非Cocapods：在路径/node_modules/react-native-image-crop-picker/ios/ImageCropPickerSDK下找到framework拖到工程中。
3、申请权限（根据情况添加）
【Privacy - Camera Usage Description，
Privacy - Photo Library Additions Usage Description，
Privacy - Photo Library Usage Description】
集成完毕。
使用：
1、导入：import ImagePicker from ‘react-native-image-crop-picker’
2、打开相册(选择多张图片)

  _mutiOpenPicker = ()=>{
        ImagePicker.openPicker({
            multiple:true,
            width:200,
            height:200,
            cropping:true,
            compressImageMaxWidth: 640,
            compressImageMaxHeight: 480,

        }).then((images)=>{
            this.setState({
                images:images.map((i)=>{
                    return{uri:i.path,width:i.width,height:i.height,mime:i.mime}
                })
            })
        }).catch((error)=>{
            alert(error)
        })
    }

选择图片，返回图片的base64

 _pickSingleBase64 = ()=>{
        ImagePicker.openPicker({
            width:300,
            height:300,
            cropping:false,
            includeBase64:true,
            includeExif:true
        }).then(image =>{
            this.setState({
                selectedImage:{uri:'data:${image.mime};base64,' + image.data,width:image.width,height:image.height},
            });
        })
    }

===============================================================
图片显示
 <ScrollView style={{backgroundColor:'red'}}>
                     {this.state.selectedImage ? this.renderImage(this.state.selectedImage) : null}
</ScrollView>
 renderImage(image) {
        return <Image style={{width: 300, height: 300, resizeMode: 'contain'}} source={image} />
    }

选择视频文件

判断是否为视频文件
if(image.mime && image.mime.toLowerCase().indexOf('video/') !== -1){
            return this.renderVideo(image)
}

加载视频文件

    renderVideo(video){
        return(
            <View style={{width:300,height:300}}>
                <Video
                    source={{uri:video.uri,type:video.mime}}
                    style={{position:'absolute',top:0,left:0,bottom:0,right:0}}
                    rate={1}
                    paused={false}
                    muted={false}
                    resizeMode={'cover'}
                    onLoad={load => alert(load)}
                    repeat={true}
                />
            </View>
        )
    }

清除缓存操作

ImagePicker.cleanSingle(this.state.selectedImage? this.state.selectedImage.uri:null).then(()=>{

        }).catch(e =>{
            alert(e)
        })

相关属性：
属性查看链接：https://github.com/ivpusic/react-native-image-crop-picker