本文原创首发于公众号：ReactNative开发圈，转载需注明出处。

React Native图片选择裁剪组件：react-native-image-crop-picker，支持安卓和IOS双平台，支持从相册、相机选择图片和视频，可以单选和多选，可以压缩和裁剪。

效果图

安装方法

npm i react-native-image-crop-picker --savereact-native link react-native-image-crop-picker

如果需要操作视频，需要安装

npm i react-native-video --savereact-native link react-native-video

因为需要操作相册和相机，IOS需要增加隐私访问说明，修改info.plist文件增加以下项：

    
     NSPhotoLibraryUsageDescription
        
    
     此 App 需要您的同意才能读取相册
        
    
     NSCameraUsageDescription
        
    
     此 App 需要您的同意才能使用相机
    

示例代码

从相册选择单个图片并裁剪

ImagePicker.openPicker({  width: 300,  height: 400,  cropping: true}).then(image => {  console.log(image);});

从相册选择多个图片

ImagePicker.openPicker({  multiple: true}).then(images => {  console.log(images);});

从相册选择视频

ImagePicker.openPicker({  mediaType: "video",}).then((video) => {  console.log(video);});

从相机选择图片

ImagePicker.openCamera({  width: 300,  height: 400,  cropping: true}).then(image => {  console.log(image);});

裁剪图片

ImagePicker.openCropper({  path: 'my-file-path.jpg',  width: 300,  height: 400}).then(image => {  console.log(image);});

主要参数说明

• cropping 是否进行裁剪 bool (default false)
• width 裁剪图片的宽度
• height 裁剪图片的高度
• multiple 是否多选 bool (default false)
• includeBase64 是否返回Base64的图片数据 bool (default false)
• mediaType 媒体类别 'photo', 'video', or 'any'
• cropperCircleOverlay 使用圆形遮盖裁剪

完整示例

完整代码：

组件地址

微信不让跳转外链，可以点击查看原文来查看外链GitHub内容。

举手之劳关注我的微信公众号：ReactNative开发圈