react-native-image-crop-picker是一款注重剪裁,相簿單選、多選的第三方框架。在我集成了react-native-image-picker的時候發現，他的剪裁不太友好。作者推薦了這個react-native-image-crop-picker。看到搜尋不到該中文的翻譯，故此文作為學習總結。

實際效果:

我用的是魅族pro6, 實現和github作者圖有點出入, 基本沒有自己處理介面：我覺得還是可以接受的。

react-native-image-crop-picker 原文如下：

支援IOS/Android的相機，視訊壓縮，多個影象選擇和裁剪處理。

github效果

使用

匯入

import ImagePicker from 'react-native-image-crop-picker';

從相簿中選擇

呼叫單影象選擇器與裁剪

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

呼叫多個影象選擇器

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

從照相中選擇

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

選擇清理

模組建立臨時檔案影象將在未來的某個地方自動清理。 如果要強制清理，可以使用clean清理所有臨時檔案影象，或者使用cleanSingle（path）清除單個臨時檔案。

ImagePicker.clean().then(() => { 
     console.log('removed all tmp images from tmp directory'
 
);})
     .catch(e => { alert(e);});

請求物件

返回物件

安裝

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

安裝後步驟

iOS (IOS沒了解,暫時沒有去進行翻譯)

cocoapods users
    Add platform :ios, '8.0'to Podfile (!important)
    Add pod 'RSKImageCropper' and pod 'QBImagePickerController'to Podfile

non-cocoapods users
     Drag and drop the ios/ImageCropPickerSDK folder to your xcode project. (Make sure    
     Copy items if needed IS ticked)
     Click on project General tab
          Under Deployment Info set Deployment Target to 8.0
          Under Embedded Binaries click + and add RSKImageCropper.framework  and 
             QBImagePicker.framework

Android
    [可選]如果你想選擇相簿在你的專案中 在AndroidManifest.xml中 
         <uses-permission android:name="android.permission.CAMERA"/>

構建

iOS

  cocoapods users
      你已經完成。
  non-cocoapods users
      If you are using pre-built frameworks from ios/ImageCropPickerSDK
     , then before deploying app to production you should strip off simulator ARCHs from    
     these, or you can add frameworks    
     from Libraries/imageCropPicker/Libraries/_framework_name_.xcodeproj/
     Products/_framework_name_.framework to Embedded Binaries instead of pre-built   
     ones. Related issue: [https://github.com/ivpusic/react-native-image-crop-
      picker/issues/61](https://github.com/ivpusic/react-native-image-crop-picker/issues/61)

    Details for second approach:
         1.Remove the pre-built frameworks from Embedded Binaries
         2.Build for Device
         3.Add the newly built binaries for both frameworks to Embedded Binaries
          (located at Libraries/imageCropPicker/Libraries/_framework_name_.xcodeproj/
         Products/_framework_name_.framework)

如何工作的

基本包含的庫。

Android ：
     Native Image Picker
     uCrop
iOS: 
    QBImagePickerController
    RSKImageCropper