`react-native-image-picker` 教程

1. 项目介绍

react-native-image-picker 是一个React Native模块，它允许您使用原生UI从设备库或直接从相机中选择媒体。这个库提供了功能丰富的选项，如视频选择、配置压缩、多图选择以及图像裁剪等。支持iOS和Android平台。

2. 项目快速启动

安装依赖

在您的React Native项目根目录下运行以下命令：

npm install react-native-image-picker
# 或者使用Yarn
yarn add react-native-image-picker

链接到你的项目（适用于RN <= 0.69）

对于React Native版本<= 0.69，需要手动链接库：

iOS

打开终端，导航到ios文件夹并执行：

cd ios && pod install

Android

打开android/app/build.gradle文件，在dependencies部分添加依赖：

dependencies {
    // ...
    implementation('com反应原生映像选择器:[e-mail].X') { transitive = true; }  // 用实际版本号替换 XXX.XX.X
}

然后同步Gradle并重新构建项目。

使用示例

导入模块并在组件中使用：

import * as ImagePicker from 'react-native-image-picker';

// 单张图片选择
const handlePickImage = () => {
  const options = {
    width: 300,
    height: 400,
    cropping: true,
  };
  ImagePicker.openPicker(options).then((image) => {
    console.log(image);
  });
};

// 多张图片选择
const handlePickMultipleImages = () => {
  const options = {
    multiple: true,
  };
  ImagePicker.openPicker(options).then((images) => {
    console.log(images);
  });
};

iOS权限设置

添加到Info.plist相应的权限键：

<key>NSPhotoLibraryUsageDescription</key>
<string>需要访问相册以选取照片</string>
<key>NSCameraUsageDescription</key>
<string>需要使用摄像头拍摄照片或录制视频</string>
<key>NSMicrophoneUsageDescription</key>
<string>需要使用麦克风录制视频</string>

3. 应用案例和最佳实践

• 在用户明确同意使用相册或相机之前，始终请求相关权限。
• 对于多图片选择，确保处理好内存管理，防止内存溢出。
• 如果应用程序要求上传较小尺寸的图像，可以在选中图片后先进行压缩操作。

4. 典型生态项目

react-native-image-picker 可与其他React Native库共同使用，实现更复杂的功能：

• react-native-image-resizer: 对图片进行大小调整和质量优化。
• react-native-fs: 文件系统操作，配合图片选择用于本地存储或上传服务器。
• expo-media-library: Expo库，提供多媒体内容管理和授权的统一接口。

至此，您应该对react-native-image-picker有了基本了解并知道如何集成到自己的项目中。请注意根据具体需求和项目结构进行适当的调整。