react-native-image-crop-picker

iOS/Android图片选择器，支持相机、视频、可配置压缩、多图选择和裁剪功能

效果

重要说明

1. 如果您使用的是react-native >= 0.60版本，请使用react-native-image-crop-picker 0.25.0或更高版本。否则请使用0.25.0以下版本。
2. 如果您想使用react-native-image-crop-picker 0.39.0或更高版本，您需要将Android的compileSdkVersion设置为33或更高。否则请使用react-native-image-crop-picker 0.39.0以下版本。

使用方法

导入库

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.openPicker({
  mediaType: "video",
}).then((video) => {
  console.log(video);
});

Android：已知'cropping'属性可能导致在Android的图库中无法显示视频。选择视频时请不要将cropping设置为true。

从相机选择

图片

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

视频

ImagePicker.openCamera({
  mediaType: 'video',
}).then(image => {
  console.log(image);
});

裁剪图片

ImagePicker.openCropper({
  path: 'my-file-path.jpg',
  width: 300,
  height: 400
}).then(image => {
  console.log(image);
});

可选的清理操作

模块会创建临时图片，这些图片将在未来某个时候自动清理。如果您想强制清理，可以使用clean来清理所有临时文件，或使用cleanSingle(path)来清理单个临时文件。

ImagePicker.clean().then(() => {
  console.log('已从临时目录中删除所有临时图片');
}).catch(e => {
  alert(e);
});

请求对象

智能相册类型（iOS）

注意：某些类型可能在所有iOS版本上都不可用。请务必检查以避免问题。

['PhotoStream', 'Generic', 'Panoramas', 'Videos', 'Favorites', 'Timelapses', 'AllHidden', 'RecentlyAdded', 'Bursts', 'SlomoVideos', 'UserLibrary', 'SelfPortraits', 'Screenshots', 'DepthEffect', 'LivePhotos', 'Animated', 'LongExposure']

响应对象

安装

步骤1

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

步骤2

iOS

cd ios
pod install

步骤3

iOS

步骤1

在Xcode中打开Info.plist，添加字符串键NSPhotoLibraryUsageDescription，其值描述为什么需要访问用户照片。更多信息请参见https://forums.developer.apple.com/thread/62229。根据您使用的功能，您可能还需要`NSCameraUsageDescription`和`NSMicrophoneUsageDescription`键。

（可选）步骤2 - 本地化相机/图库/裁剪器文本按钮

• 打开您的Xcode项目
• 通过在导航栏（左侧）打开项目名称进入项目设置
• 在项目列表中选择您的项目
• 应该在Info选项卡中，通过"+"添加Localizations中您的应用缺少的语言
• 重新构建，现在您的应用相机和图库应该有您添加的语言的经典iOS文本。

Android

• 非常重要 在build.gradle的repositories部分添加以下内容，并将Android SDK版本更改为33。(android/build.gradle)

buildscript {
    ext {
        buildToolsVersion = "31.0.0"
        minSdkVersion = 21
        compileSdkVersion = 33
        targetSdkVersion = 33
        ...
    }
}

allprojects {
    repositories {
      mavenLocal()
      jcenter()
      maven { url "$rootDir/../node_modules/react-native/android" }

      // 添加这个
      maven { url 'https://maven.google.com' }

      // 添加这个
      maven { url "https://www.jitpack.io" }
    }
}

• 添加useSupportLibrary (android/app/build.gradle)

android {
    ...

    defaultConfig {
        ...
        vectorDrawables.useSupportLibrary = true
        ...
    }
    ...
}

• 如果您使用的react-native-image-crop-picker版本 >= 0.35.0，最低Gradle版本要求

3.3.3
3.4.3
3.5.4
3.6.4
4.0.1

更多详细信息请参考 https://github.com/ivpusic/react-native-image-crop-picker/issues/1406

• 如果您使用的SDK版本 >= 33，在app/src/main/AndroidManifest.xml中添加以下内容

  • <uses-permission android:name="android.permission.READ_MEDIA_IMAGES"/>

• [可选] 如果您想在项目中使用相机选择器，在app/src/main/AndroidManifest.xml中添加以下内容

  • <uses-permission android:name="android.permission.CAMERA"/>

• [可选] 如果您想使用前置摄像头，还需在app/src/main/AndroidManifest.xml中添加以下内容

  • <uses-feature android:name="android.hardware.camera" android:required="false" />
  • <uses-feature android:name="android.hardware.camera.front" android:required="false" />

待办事项

• [Android] 标准化多选
• [Android] 视频压缩

贡献者

本项目的存在要感谢所有做出贡献的人。[参与贡献]

支持者

感谢所有的支持者！🙏 [成为支持者]

赞助商

通过成为赞助商来支持这个项目。您的logo将会显示在这里，并链接到您的网站。[成为赞助商]

许可证

MIT