本文原創(chuàng)首發(fā)于公眾號(hào)：ReactNative開(kāi)發(fā)圈，轉(zhuǎn)載需注明出處。

React Native圖片選擇裁剪組件：react-native-image-crop-picker，支持安卓和IOS雙平臺(tái)，支持從相冊(cè)、相機(jī)選擇圖片和視頻，可以單選和多選，可以壓縮和裁剪。

效果圖

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

因?yàn)樾枰僮飨鄡?cè)和相機(jī)，IOS需要增加隱私訪問(wèn)說(shuō)明，修改info.plist文件增加以下項(xiàng)：

    <key>NSPhotoLibraryUsageDescription</key>
    <string>此 App 需要您的同意才能讀取相冊(cè)</string>
    <key>NSCameraUsageDescription</key>
    <string>此 App 需要您的同意才能使用相機(jī)</string>

示例代碼

從相冊(cè)選擇單個(gè)圖片并裁剪

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

從相冊(cè)選擇多個(gè)圖片

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

從相冊(cè)選擇視頻

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

從相機(jī)選擇圖片

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ù)說(shuō)明

• cropping 是否進(jìn)行裁剪 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文件夾中。請(qǐng)不要吝嗇你們的Star！

組件地址

GitHub - ivpusic/react-native-image-crop-picker: iOS/Android image picker with support for camera, configurable compression, multiple images and cropping

微信不讓跳轉(zhuǎn)外鏈，可以點(diǎn)擊查看原文來(lái)查看外鏈GitHub內(nèi)容。

舉手之勞關(guān)注我的微信公眾號(hào)：ReactNative開(kāi)發(fā)圈

image