本文原创首发于公众号:ReactNative开发圈,转载需注明出处。React Native图片选择裁剪组件:react-native-image-crop-picker,支持安卓和IOS双平台,支持从相册、相机选择图片和视频,可以单选和多选,可以压缩和裁剪。
效果图
安装方法
npm i react-native-image-crop-picker --save
react-native link react-native-image-crop-picker
如果需要操作视频,需要安装
npm i react-native-video --save
react-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开发圈