mirror of
https://github.com/zhigang1992/react-native.git
synced 2026-04-23 20:01:01 +08:00
Updates from Tue Mar 10
- [ReactNative] Make tests run on TravisCI | Alex Kotliarskyi - [Relay] Update Relay + ES6 class containers | Christoph Pojer - [React Native] Add RCTAdSupport.xcodeproj | Alexsander Akers - [ReactNative][Android] Fix after a new React version was downstreamed | Philipp von Weitershausen - [React Native] Add preliminary animation API | Alex Akers - [ReactKit] Create test for OSS ReactKit | Alex Kotliarskyi - [React Native][Device ID][wip] implement most basic js access | Alex Akers - [ReactNative] OSS Picker | Spencer Ahrens - [ReactNative] Fix typo in RCTUIManager | Tadeu Zagallo - [ReactNative] Fix GeoLocation files letter case | Tadeu Zagallo - Unified the method signature for addUIBlock: to further simplify porting ViewManagers | Nick Lockwood - [ReactNative] Oss GeoMap | Tadeu Zagallo - [ReactNative] OSS CameraRoll | Tadeu Zagallo - [ReactNative] allowLossyConversion on NSString->NSData conversion | Andrew Rasmussen - [React Native][RFC] Print __DEV__ value on app start | Alex Kotliarskyi
This commit is contained in:
Alex Kotliarskyi
231
Examples/UIExplorer/CameraRollView.ios.js
Normal file
231
Examples/UIExplorer/CameraRollView.ios.js
Normal file
@@ -0,0 +1,231 @@
|
||||
/**
|
||||
* Copyright 2004-present Facebook. All Rights Reserved.
|
||||
*
|
||||
* @providesModule CameraRollView
|
||||
*/
|
||||
'use strict';
|
||||
|
||||
var React = require('react-native');
|
||||
var {
|
||||
ActivityIndicatorIOS,
|
||||
CameraRoll,
|
||||
Image,
|
||||
ListView,
|
||||
ListViewDataSource,
|
||||
StyleSheet,
|
||||
View,
|
||||
} = React;
|
||||
|
||||
var groupByEveryN = require('groupByEveryN');
|
||||
var logError = require('logError');
|
||||
|
||||
var propTypes = {
|
||||
/**
|
||||
* The group where the photos will be fetched from. Possible
|
||||
* values are 'Album', 'All', 'Event', 'Faces', 'Library', 'PhotoStream'
|
||||
* and SavedPhotos.
|
||||
*/
|
||||
groupTypes: React.PropTypes.oneOf([
|
||||
'Album',
|
||||
'All',
|
||||
'Event',
|
||||
'Faces',
|
||||
'Library',
|
||||
'PhotoStream',
|
||||
'SavedPhotos',
|
||||
]),
|
||||
|
||||
/**
|
||||
* Number of images that will be fetched in one page.
|
||||
*/
|
||||
batchSize: React.PropTypes.number,
|
||||
|
||||
/**
|
||||
* A function that takes a single image as a parameter and renders it.
|
||||
*/
|
||||
renderImage: React.PropTypes.func,
|
||||
|
||||
/**
|
||||
* imagesPerRow: Number of images to be shown in each row.
|
||||
*/
|
||||
imagesPerRow: React.PropTypes.number,
|
||||
};
|
||||
|
||||
var CameraRollView = React.createClass({
|
||||
propTypes: propTypes,
|
||||
|
||||
getDefaultProps: function() {
|
||||
return {
|
||||
groupTypes: 'SavedPhotos',
|
||||
batchSize: 5,
|
||||
imagesPerRow: 1,
|
||||
renderImage: function(asset) {
|
||||
var imageSize = 150;
|
||||
var imageStyle = [styles.image, {width: imageSize, height: imageSize}];
|
||||
return (
|
||||
<Image
|
||||
source={asset.node.image}
|
||||
style={imageStyle}
|
||||
/>
|
||||
);
|
||||
},
|
||||
};
|
||||
},
|
||||
|
||||
getInitialState: function() {
|
||||
var ds = new ListViewDataSource({rowHasChanged: this._rowHasChanged});
|
||||
|
||||
return {
|
||||
assets: [],
|
||||
groupTypes: this.props.groupTypes,
|
||||
lastCursor: null,
|
||||
noMore: false,
|
||||
loadingMore: false,
|
||||
dataSource: ds,
|
||||
};
|
||||
},
|
||||
|
||||
/**
|
||||
* This should be called when the image renderer is changed to tell the
|
||||
* component to re-render its assets.
|
||||
*/
|
||||
rendererChanged: function() {
|
||||
var ds = new ListViewDataSource({rowHasChanged: this._rowHasChanged});
|
||||
this.state.dataSource = ds.cloneWithRows(
|
||||
groupByEveryN(this.state.assets, this.props.imagesPerRow)
|
||||
);
|
||||
},
|
||||
|
||||
componentDidMount: function() {
|
||||
this.fetch();
|
||||
},
|
||||
|
||||
componentWillReceiveProps: function(nextProps) {
|
||||
if (this.props.groupTypes !== nextProps.groupTypes) {
|
||||
this.fetch(true);
|
||||
}
|
||||
},
|
||||
|
||||
_fetch: function(clear) {
|
||||
if (clear) {
|
||||
this.setState(this.getInitialState(), this.fetch);
|
||||
return;
|
||||
}
|
||||
|
||||
var fetchParams = {
|
||||
first: this.props.batchSize,
|
||||
groupTypes: this.props.groupTypes,
|
||||
};
|
||||
if (this.state.lastCursor) {
|
||||
fetchParams.after = this.state.lastCursor;
|
||||
}
|
||||
|
||||
CameraRoll.getPhotos(fetchParams, this._appendAssets, logError);
|
||||
},
|
||||
|
||||
/**
|
||||
* Fetches more images from the camera roll. If clear is set to true, it will
|
||||
* set the component to its initial state and re-fetch the images.
|
||||
*/
|
||||
fetch: function(clear) {
|
||||
if (!this.state.loadingMore) {
|
||||
this.setState({loadingMore: true}, () => { this._fetch(clear); });
|
||||
}
|
||||
},
|
||||
|
||||
render: function() {
|
||||
return (
|
||||
<ListView
|
||||
renderRow={this._renderRow}
|
||||
renderFooter={this._renderFooterSpinner}
|
||||
onEndReached={this._onEndReached}
|
||||
style={styles.container}
|
||||
dataSource={this.state.dataSource}
|
||||
/>
|
||||
);
|
||||
},
|
||||
|
||||
_rowHasChanged: function(r1, r2) {
|
||||
if (r1.length !== r2.length) {
|
||||
return true;
|
||||
}
|
||||
|
||||
for (var i = 0; i < r1.length; i++) {
|
||||
if (r1[i] !== r2[i]) {
|
||||
return true;
|
||||
}
|
||||
}
|
||||
|
||||
return false;
|
||||
},
|
||||
|
||||
_renderFooterSpinner: function() {
|
||||
if (!this.state.noMore) {
|
||||
return <ActivityIndicatorIOS style={styles.spinner} />;
|
||||
}
|
||||
return null;
|
||||
},
|
||||
|
||||
// rowData is an array of images
|
||||
_renderRow: function(rowData, sectionID, rowID) {
|
||||
var images = rowData.map((image) => {
|
||||
if (image === null) {
|
||||
return null;
|
||||
}
|
||||
return this.props.renderImage(image);
|
||||
});
|
||||
|
||||
return (
|
||||
<View style={styles.row}>
|
||||
{images}
|
||||
</View>
|
||||
);
|
||||
},
|
||||
|
||||
_appendAssets: function(data) {
|
||||
var assets = data.edges;
|
||||
var newState = { loadingMore: false };
|
||||
|
||||
if (!data.page_info.has_next_page) {
|
||||
newState.noMore = true;
|
||||
}
|
||||
|
||||
if (assets.length > 0) {
|
||||
newState.lastCursor = data.page_info.end_cursor;
|
||||
newState.assets = this.state.assets.concat(assets);
|
||||
newState.dataSource = this.state.dataSource.cloneWithRows(
|
||||
groupByEveryN(newState.assets, this.props.imagesPerRow)
|
||||
);
|
||||
}
|
||||
|
||||
this.setState(newState);
|
||||
},
|
||||
|
||||
_onEndReached: function() {
|
||||
if (!this.state.noMore) {
|
||||
this.fetch();
|
||||
}
|
||||
},
|
||||
});
|
||||
|
||||
var styles = StyleSheet.create({
|
||||
row: {
|
||||
flexDirection: 'row',
|
||||
flex: 1,
|
||||
},
|
||||
url: {
|
||||
fontSize: 9,
|
||||
marginBottom: 14,
|
||||
},
|
||||
image: {
|
||||
margin: 4,
|
||||
},
|
||||
info: {
|
||||
flex: 1,
|
||||
},
|
||||
container: {
|
||||
flex: 1,
|
||||
},
|
||||
});
|
||||
|
||||
module.exports = CameraRollView;
|
||||
Reference in New Issue
Block a user