本文原创首发于公众号: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文件增加以下项:
<key>NSPhotoLibraryUsageDescription</key>
<string>此 App 需要您的同意才能读取相册</string>
<key>NSCameraUsageDescription</key>
<string>此 App 需要您的同意才能使用相机</string>
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);
});
完整代码:GitHub - forrest23/ReactNativeComponents: React Native组件大全,介绍React Native常用组件的使用方法和使用示例本次示例代码在 Component08文件夹中。请不要吝啬你们的Star!
GitHub - ivpusic/react-native-image-crop-picker: iOS/Android image picker with support for camera, configurable compression, multiple images and cropping
本文分享自 ReactNative开发圈 微信公众号,前往查看
如有侵权,请联系 cloudcommunity@tencent.com 删除。
本文参与 腾讯云自媒体同步曝光计划 ,欢迎热爱写作的你一起参与!