如何在 React Native 应用程序中从相机和图库中挑选图像

如果您想访问整个源代码， 你可以在这里查看 GitHub 存储库 .有关分步教程，请继续阅读下面的内容。

从图库和相机中挑选图像 是几乎所有应用程序都需要的最重要和最基本的功能之一。高级功能建立在这个基本的核心设施之上。为了在 React Native 中选择图像，我们将使用一个流行的高级库，称为 反应原生图像选择器 .这提供了 图像选择器 您可以在其中提供从图库或相机中选择图像的组件。

我们将按照逐步的方法在 React Native 中创建一个 ImagePicker 应用程序。以下是步骤

第 1 步 - 创建一个基本的 React Native 应用程序
第 2 步 — 设置 React Native Image Picker
第 3 步 - 使用 React Native Image Picker 在应用程序中选择图像

所以让我们潜入水中吧！

Yeehhhhh..!!

第 1 步 - 创建一个基本的 React Native 应用程序

React Native 入门将帮助您更多地了解制作 React Native 项目的方式。我们将使用 反应原生初始化 制作我们的 React Native App 或者我们可以运行 npx 反应原生初始化 .

假设您已经安装了节点，您可以使用 npm 安装 反应本机 cli 命令行实用程序。打开终端，将以下命令运行到底部

 npm install -g react-native-cli

现在，让我们创建一个新的 React Native 项目，例如 RNimagePicker

 反应原生初始化 RNimagePicker

完成上述命令后，在首选编辑器中打开主文件夹。当我们在代码编辑器中打开项目时，它的结构如下所示。

Folder structure

第 2 步 — 设置 React Native Image Picker

使用 反应本机图像选择器 我们需要安装 反应原生图像选择器 依赖。

安装依赖

添加 反应本机图像选择器 **** 对于我们的 React Native 项目，我们需要在项目的根目录下运行以下命令

 npm install react-native-image-picker --save **或者** yarn add react-native-image-picker

该命令会将所有依赖项复制到您的 node_modules 目录中，您可以在 节点模块 名为的目录 反应原生图像选择器

提供的方法 反应原生图像选择器

启动相机（） 方法启动相机并帮助我们拍照。它返回具有不同属性的文件数据，如 URI、base64 URL 和其他字段。稍后再谈。

启动图像库（） 方法启动照片库，我们可以选择照片和视频。它返回具有 URI、base64 URL 等属性的文件数据。稍后再谈。

权限

安卓：- 安卓不需要权限。

iOS :- 向 Info.plist 添加适当的键，

如果您允许用户从照片中选择图像/视频，请添加 NSPhotoLibraryUsageDescription .

如果您允许用户捕获图像添加 NSCameraUsageDescription 关键也。

如果您允许用户捕获视频添加 NSCameraUsageDescription 添加 NSMicrophoneUsageDescription 关键也。

Step — 3 如何使用 React Native Image Picker

反应本机图像选择器 库提供了一些方法，您可以在其中设置选项，如选择器的标题、自定义按钮（按钮的名称和标题）和存储选项（如 skipBackup 等）。

iOS Simulator

启动相机

要实现启动相机的功能，请单击“ 直接发射相机 ”，然后使用下面的代码。它将打开相机并在图像组件上显示单击的图像。

Launch Camera

启动图像库

要启动图像库，您可以使用以下代码。它将直接打开图像库并在图像组件上显示选定图像。

Click On Launch Image Library

应用程序.js

以下是对中使用的方法的解释 appImagePicker.js 文件： -

launchNativeImageLibrary [上面代码中的第 83 行]：- 该函数负责设置选项（用于图像选择器）并调用图像选择器方法打开原生库以选择图像。此函数在“直接启动图像库”[第 130 行]上调用。
启动NativeCamera [第 58 行]：- 该函数负责设置相机选项并调用图像选择器方法打开相机。此函数在“直接启动相机”[第 126 行]上调用。
渲染文件数据 [第 30 行]：- 此函数负责创建一个 base64 URL，可用于在 Image 标签（图像视图）中显示图像。
renderFileUri [第 43 行]：- 此函数负责使用文件 URI，可用于在 Image 标签（图像视图）中显示图像。

这个 React Native 模块允许您使用原生 UI 从设备库以及直接从相机中选择照片/视频。

您的屏幕应如下所示：

iOS screen

iOS 模拟器屏幕

最后，供您参考，此图像选择器功能的所有屏幕将类似于下图所示：

Selecting image from Gallery

对于 iOS 模拟器，不支持打开相机，但可以在真机上使用。

React-native-image-picker vs Expo ImagePicker

最后一点，如果您想知道这种方法是否也适用于 Expo，答案是——不完全是。您将需要为此使用 expo Imagepicker 世博会图像选择器

结论

在这篇文章中，您快速学会了如何实现 反应本机图像选择器 在您的 React Native 应用程序中。这使您的应用可以从相机和图库中挑选图像/视频。它是几乎所有应用程序都需要的最重要和最基本的功能之一。
仍然，Image Picker 在 React Native 应用程序中不起作用，为什么？为此，您可以在这个 Github repo 中找到完整的代码这里 .