码迷,mamicode.com
首页 > 其他好文 > 详细

React Native学习-CameraRoll

时间:2016-04-20 13:35:59      阅读:1232      评论:0      收藏:0      [点我收藏+]

标签:

react-native中CameraRoll模块提供了访问本地相册的功能。

在react版本为0.23.0的项目中,不支持Android,而且在iOS中使用CameraRoll还需要我们手动操作:

iOS:

  1. 将RCTCameraRoll.xcodeproj添加到我们的项目中:展开项目 > Libraies  右键Libraies点击 “Add Files to ‘项目名’ ”,找到 项目文件夹/node_modules/react-native/Libraries/CameraRoll/RCTCameraRoll.xcodeproj , 添加到项目里。
  2. 我们要把libRCTCameraRoll.a这个苦添加到主项目的Link Binary With Libraries中,如下图:
    技术分享

经过这样的添加我们在项目中再使用CameraRoll里边的函数就不会出错了。

 

CameraRoll模块中有两个函数:saveImageWithTag()、getPhotos()。

saveImageWithTag()

保存一个图片到相册。

@param {string} tag 在安卓上,本参数是一个本地URI,例如"file:///sdcard/img.png".

在iOS设备上可能是以下之一:

  • 本地URI
  • 资源库的标签
  • 非以上两种类型,表示图片数据将会存储在内存中(并且在本进程持续的时候一直会占用内存)。

返回一个Promise,操作成功时返回新的URI。

示例:

CameraRoll.saveImageWithTag(image).then(function (success) {
            Alert.alert(
                ‘‘,
                保存到相册成功,
                [
                    {text: 确定, onPress: () => console.log(success)}

                ]
            )
        }, function (error) {
            Alert.alert(
                ‘‘,
                保存到相册失败,
                [
                    {text: 确定, onPress: () => console.log(error)}

                ]
            )
        }
    )
}

获得相册中的照片。getPhotos()

学习这个功能是在官方demo中学习的,它写成了一个可以使用的js文件CameraRollView.js,我们需要将该文件引入我们的项目中。

附件:CameraRollView.js

文件打开会有错误显示,只是语法不一样,这个不影响效果。

使用方法:

import CameraRollView from ../CameraRollView;

export  default class CameraRollView extends Component {
    constructor(props) {
        super(props);
        CameraRoll.getPhotos({
            first: 21,
            assetType: Photos
        }).then(function (data) {

        }, function (error) {

        })
    }

    _renderImage(asset) {
        var windowSize = require(Dimensions).get(window);
        return (
            <TouchableOpacity key={asset}>
                <Image source={asset.node.image} style={{width: (windowSize.width-30)/3, height: 110, margin:5}}/>
            </TouchableOpacity>
        );
    }

    render() {
        return (<View style={{flex:1}}>
                  <CameraRollView renderImage={this._renderImage}/>
                </View>
        )
    }
}

 

React Native学习-CameraRoll

标签:

原文地址:http://www.cnblogs.com/maoyazhi/p/5411759.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!