美文网首页React NativeReact-Native
rn中访问相册和保存图片

rn中访问相册和保存图片

作者: Kris_lee | 来源:发表于2017-04-10 21:22 被阅读762次

    在react native中访问照片和保存图片。实现如下的简单效果。

    1、效果图

    首先,在react native 中有 CameraRoll 这样的api,官网参考:

    CameraRoll模块提供了访问本地相册的功能。在iOS上使用这个模块之前,你需要先链接RCTCameraRoll库(ios)

    {

    1.\node_modules\react-native\Libraries\CameraRoll下的Xcode项目文件RCTCameraRoll.xcodeproj拖动到当前Xcode项目的Libraries目录

    2.选中当前项目,在右边选择Build Phases,点击打开子项目Link Binary With Libraris

    3.打开第一步插入的RCTCameraRoll.xcodeproj,再打开它的子目录Products,将子目录下的libRCTCameraRoll.a文件拖到Link Binary With Libraris列表中

    4.使用Xcode重新运行项目

    }

    2、访问权限

    在IOS10.之后访问相册,相机,麦克风,数据,无线等,都需要添加权限,注意:这里添加权限的位置是在Xcode工程下,如这是我创建的工程,

    info.plist是添加权限的地方,注意添加的key关键字不能有偏差,string是添加值,向用户说明,这里提供一些其他的:

    NSContactsUsageDescription -> 通讯录

    NSMicrophoneUsageDescription -> 麦克风

    NSPhotoLibraryUsageDescription -> 相册

    NSCameraUsageDescription -> 相机

    NSLocationAlwaysUsageDescription -> 地理位置

    NSLocationWhenInUseUsageDescription -> 地理位置

    3、调用方法 

    static saveImageWithTag(tag) 不建议,我尝试一下之后,app建议我使用下面一个保存的方法。

    static saveToCameraRoll(tag, type?)

    在Android上,标签必须是当地的图像或视频的URI,比如“文件:/ / / sdcard / img.png”。

    在iOS,标签可以是任何图像URI(包括本地、远程资产库中和base64数据URI)或本地视频文件的URI(远程或不支持数据URI保存视频在这个时候)。如果标签的文件扩展名。mov。mp4,推断出视频。否则它将被视为一个照片。覆盖的自动选择,您可以传递一个可选的类型参数,必须“照片”或“视频”之一。返回一个承诺将解决新的URI。

    在这里可以是图片,也可以是视频文件,saveToCameraRoll更加全面一些。

    static getPhotos(params: object)

    返回一个带有图片标识符对象的Promise。

    params:有4个参数。

    1.first 数值 希望获取多少张图片的信息

    2.groupTypes 字符串 默认为SavedPhotos [Album All Event Faces Library PhotoStream] 仅支持IOS平台 用来指定获取图片或视频的类型

    3.assetType 字符串 默认为Photos 表示只获取图片 [All Videos]

    4.after 字符串 用来记录上一次获取图片的结束标志 方便可以接着上次的位置继续获取 它的值不能由开发者随意赋予,而是应当在上一次获取图片后保存其值。通常,在Android平台,一开始就给这个值为null,但是在IOS平台,设置为null会抛一个无法捕捉的异常,导致红屏。

    打印data,在控制台显示的数据,安卓和ios不一样。

    图片取自东方耀老师在关于CameraRoll里的说明


    4、遇到问题

    在使用saveToCameraRoll 中。

    使用了参数,而这个方法中也说明了,使用了字符串,URI,即图片的地址。因此,在定义保存两个图片的时候,我定义了first ,second

    注意这里的地址:是图片所示,而不是引用图片时候../../imgs/XXX.png。 

    5、github地址:在工程Component下Cammera。

    https://github.com/krislee94/TestComponent

    以上在做关于相册的时候遇到的问题,在这里做下笔记,如有不足,希望各位大神点出。

    相关文章

      网友评论

        本文标题:rn中访问相册和保存图片

        本文链接:https://www.haomeiwen.com/subject/ychjattx.html