如何在 React Native 应用程序中从相机和图库中挑选图像
如何在 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 中找到完整的代码 这里 .
下一步
如果您喜欢这个博客，您还会发现以下 React Native 博客很有趣且很有帮助。欢迎在评论区提出任何问题
- 火力基地—— 集成 Firebase | 分析 | 推送通知 | Firebase CRUD
- 如何在 React Native 中使用 — 地理位置 | 生命周期钩子 | 图像选择器 | Redux 实现 | 进行 API 调用 | 导航 | 翻译 | 条码和二维码扫描 | 发送和阅读短信 | 谷歌愿景 | 拉动刷新
- 付款— 苹果支付 | 条纹支付
- 验证 - 谷歌登录 | Facebook登入 | 电话验证 | 推特登录
- 在 React Native 中创建 Instagram / Whatsapp 故事功能
- React Native 生命周期钩子 | 实施 Redux | Redux 的异步操作
- 在 React Native 中创建很棒的应用程序 使用完整的应用程序
如果你需要一个基础来启动你的下一个 React Native 应用程序，你可以使用 React Native 完整应用
React Native Full App by Enappd
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明
