React Native之图片保存到本地相册(ios android)

 

一,需求分析

    1,react native保存网络图片到相册,iOS端可以用RN自带的CameraRoll完美解决,但是android端不支持从网络保存图片。

    2,只保存一张图片到本地相册(比如生成的邀请卡 付款码等)

二,介绍与iOS简单配置

     2.1 介绍

saveToCameraRoll(tag, type?)方法介绍

(1)这个是 CameraRoll 的一个静态方法,作用是保存一张图片到相册。
(2)参数 tag 是图片的地址,为字符串类型。其内容根据不同的设备也有所不同:
    • 在 Android 上:tag 是本地地址,例如:"file:///sdcard/img.png"
    • 在 iOS 上:tag 可以是 url、assets-library、内存图片中的一种。
(3)参数 type 不是必须的,可选值是'photo' 或 'video'。用来表示存的是图片还是视频。不指定的话程序也会根据后缀自行判断。(结尾为 .mov 或 .mp4 为视频,其它为图片)

     2.2 CameraRoll API iOS链接配置

第一步

    添加CameraRoll库(node_modules/react-native/Libraries/CameraRoll/RCTCameraRoll.xcodeproj)到XCode的Libraries分组里 

第二步

    将 RCTCameraRoll.xcodeproj下的Products文件夹中的静态库文件(.a文件,拖到Xcode General--Linked FrameworksLibraries下。

第三步

    配置访问相册的权限,如果不配置Privacy - Photo Library Additions Usage Description到Info.plist下,会出现闪退情况。在Info.plist添加如下:

复制代码
1     <key>NSPhotoLibraryAddUsageDescription</key>2     <string>使用相册</string>3     <key>NSPhotoLibraryUsageDescription</key>4     <string>使用相册</string>
复制代码

     Android可以直接访问CameraRoll API

复制代码
1 import { Platform, CameraRoll } from 'react-native'; 2 import RNFS from 'react-native-fs';
复制代码

三,应用实例

    3.1 网络图片保存到相册(支持iOS Android)

下载网络图片,并保存到相册中:

复制代码
 1 /**  2 
                        
关键字:
50000+
5万行代码练就真实本领
17年
创办于2008年老牌培训机构
1000+
合作企业
98%
就业率

联系我们

电话咨询

0532-85025005

扫码添加微信