react-native试玩(31)-访问相册API
来源:互联网 发布:单片机嵌入式培训 编辑:程序博客网 时间:2024/06/05 04:15
CameraRoll
方法
实例
'use strict';var React = require('react-native');var { CameraRoll, Image, SliderIOS, StyleSheet, SwitchIOS, Text, View, TouchableOpacity} = React;var CameraRollView = require('./CameraRollView.ios');var AssetScaledImageExampleView = require('./AssetScaledImageExample');var CAMERA_ROLL_VIEW = 'camera_roll_view';var CameraRollExample = React.createClass({ getInitialState() { return { groupTypes: 'SavedPhotos', sliderValue: 1, bigImages: true, }; }, render() { return ( <View> <SwitchIOS onValueChange={this._onSwitchChange} value={this.state.bigImages} /> <Text>{(this.state.bigImages ? 'Big' : 'Small') + ' Images'}</Text> <SliderIOS value={this.state.sliderValue} onValueChange={this._onSliderChange} /> <Text>{'Group Type: ' + this.state.groupTypes}</Text> <CameraRollView ref={CAMERA_ROLL_VIEW} batchSize={20} groupTypes={this.state.groupTypes} renderImage={this._renderImage} /> </View> ); }, loadAsset(asset){ this.props.navigator.push({ title: 'Camera Roll Image', component: AssetScaledImageExampleView, backButtonTitle: 'Back', passProps: { asset: asset }, }); }, _renderImage(asset) { var imageSize = this.state.bigImages ? 150 : 75; var imageStyle = [styles.image, {width: imageSize, height: imageSize}]; var location = asset.node.location.longitude ? JSON.stringify(asset.node.location) : 'Unknown location'; return ( <TouchableOpacity onPress={ this.loadAsset.bind( this, asset ) }> <View key={asset} style={styles.row}> <Image source={asset.node.image} style={imageStyle} /> <View style={styles.info}> <Text style={styles.url}>{asset.node.image.uri}</Text> <Text>{location}</Text> <Text>{asset.node.group_name}</Text> <Text>{new Date(asset.node.timestamp).toString()}</Text> </View> </View> </TouchableOpacity> ); }, _onSliderChange(value) { var options = CameraRoll.GroupTypesOptions; var index = Math.floor(value * options.length * 0.99); var groupTypes = options[index]; if (groupTypes !== this.state.groupTypes) { this.setState({groupTypes: groupTypes}); } }, _onSwitchChange(value) { this.refs[CAMERA_ROLL_VIEW].rendererChanged(); this.setState({ bigImages: value }); }});var styles = StyleSheet.create({ row: { flexDirection: 'row', flex: 1, }, url: { fontSize: 9, marginBottom: 14, }, image: { margin: 4, }, info: { flex: 1, },});exports.title = 'Camera Roll';exports.description = 'Example component that uses CameraRoll to list user\'s photos';exports.examples = [ { title: 'Photos', render(): ReactElement { return <CameraRollExample />; } }];
效果
0 1
- react-native试玩(31)-访问相册API
- react-native试玩(33)-状态栏API
- react-native试玩(27)-上拉菜单API
- react-native试玩(28)-弹出框API
- react-native试玩(29)-应用注册API
- react-native试玩(30)-应用状态API
- react-native试玩(32)-推送通知API
- react-native试玩(1)
- react-native试玩(2)
- react native 相册功能
- react-native试玩(29)-React Native Playground
- react-native试玩(35)-react-native-icons插件
- react-native试玩(4)-新建项目
- react-native试玩(7)-图片控件
- react-native试玩(8)-列表视图
- react-native试玩(9)-地图视图
- react-native试玩(10)-导航栏
- react-native试玩(11)-模态
- plsql链接oracle Could not load "……\bin\oci.dll"异常
- Matlab cell函数
- Linux下查看和添加PATH环境变量
- C++中未解之谜
- UML类图几种关系的总结
- react-native试玩(31)-访问相册API
- iOS测试-XCTest
- oracle中的exists和not exists和in用法详解
- export CROSS_COMPILE=arm-linux-gnueabi- 之后,无法编译kernel
- IE兼容性
- Maven 手动添加 JAR 包到本地仓库
- 微信公众帐号开发教程第18篇-应用实例之音乐搜索
- 【笔记】Android开发中从EditText中获取数字
- 关于一致/非一致代码段与TSS 关系的个人看法