`react-native-image-picker` 教程

最新推荐文章于 2024-08-12 08:43:41 发布

班磊闯Andrea

最新推荐文章于 2024-08-12 08:43:41 发布

阅读量270

点赞数 4

本文链接：https://blog.csdn.net/gitblog_01129/article/details/141118302

版权

`react-native-image-picker` 教程

react-native-image-picker:sunrise_over_mountains: A React Native module that allows you to use native UI to select media from the device library or directly from the camera.项目地址:https://gitcode.com/gh_mirrors/react/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反应原生映像选择器:library@XXX.XX.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>