RN实现调用相册权限

最新推荐文章于 2024-04-11 09:42:41 发布

赐你岁月如歌

最新推荐文章于 2024-04-11 09:42:41 发布

阅读量1.4k

点赞数 1

分类专栏： React学习文章标签： android

本文链接：https://blog.csdn.net/a253399414/article/details/108570061

版权

本文介绍了在React Native (RN) 中如何实现调用Android相册权限并保存图片到本地的过程。首先在AndroidMainifest.xml配置权限，然后面对需求，通过react-native-fs下载网络图片，并使用react-native-community/cameraroll组件在Android中保存图片到相册，解决CameraRoll.saveToCameraRoll()在Android上的问题。

摘要由CSDN通过智能技术生成

1.写在前面

在android中实现调用相机的权限的前提是APP请求到调用相机的权限，这个权限在android/app/src/main/AndriodMainifest.xml中进行配置
在这里插入图片描述

<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>
<uses-permission android:name ="android.permission.READ_EXTERNAL_STORAGE" />

2.简叙需求

获得权限以后，接着要说一下这次的需求，我原本是想做一个很简单的页面，就是一个联系客服的二维码，然后可以点击查看大图，长按图片可以保存到本地相册。由于才疏学浅，以为很简单的事情，实行过程却很艰难。

3.具体实施

在保存图片这个功能上，安卓和苹果有着很大不同，IOS可以在RN中使用自带的CameraRoll，而Android 使用这个方法则会报错误：open failed:ENOENT(No such file or diectory)，这是因为Android的CameraRoll.saveToCameraRoll()方法只能保存下载到本地的图片或者视频，而且RN自带的CameraRoll已经不再更新，现在需要使用的是react-native-community/cameraroll，而将网络上下载的图片缓存到本地的组件是react-native-fs，所以现在需要分别安装这两个组件下面是安装两个组件的教程：
3.1安装react-native-fs
第一步：

npm install react-native-fs --save

第二步：

react-native link react-native-fs

这里react-native-fs组件就已经安装好了。
3.2安装react-native-community/cameraroll
第一步：

npm install @react-native-community/cameraroll --save

第二步：

react-native link @react-native-community/cameraroll && npx pod-install

3.3实现代码

import React from 'react';
import {
   
  Dimensions,
  Image,
  Modal,
  ScrollView,
  StyleSheet,
  TouchableOpacity,
  View,
  Text,
  ActivityIndicator,
  Platform
} from 'react-native';
import ImageViewer from 'react-native-image-zoom-viewer';
import CameraRoll from '@react-native-community/cameraroll'


const {
   width, height} = Dimensions.get(