本文原創(chuàng)首發(fā)于公眾號：ReactNative開發(fā)圈，轉(zhuǎn)載需注明出處。
React Native圖片選擇裁剪組件：react-native-image-crop-picker图筹，支持安卓和IOS雙平臺瓣戚，支持從相冊球碉、相機選擇圖片和視頻撞蜂，可以單選和多選盲镶，可以壓縮和裁剪。
效果圖
image
安裝方法
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);
});
主要參數(shù)說明
- cropping 是否進行裁剪 bool (default false)
- width 裁剪圖片的寬度
- height 裁剪圖片的高度
- multiple 是否多選 bool (default false)
- includeBase64 是否返回Base64的圖片數(shù)據(jù) bool (default false)
- mediaType 媒體類別 'photo', 'video', or 'any'
- cropperCircleOverlay 使用圓形遮蓋裁剪
完整示例
完整代碼：GitHub - forrest23/ReactNativeComponents: React Native組件大全送漠，介紹React Native常用組件的使用方法和使用示例
本次示例代碼在 Component08文件夾中。請不要吝嗇你們的Star由蘑！
組件地址
微信不讓跳轉(zhuǎn)外鏈闽寡，可以點擊查看原文來查看外鏈GitHub內(nèi)容代兵。
舉手之勞關(guān)注我的微信公眾號：ReactNative開發(fā)圈
image
