react-native試玩(31)-訪問相簿API

來源:互聯網
上載者:User

CameraRoll 方法

名稱 作用
saveImageWithTag 儲存圖片到相簿
getPhotos 從相簿中得到圖片
執行個體
'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 />; }  }];
效果

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.