This commit is contained in:
Ran Greenberg 2016-06-28 12:14:28 +03:00
parent aeefe87ada
commit 971428c0cd
3 changed files with 58 additions and 101 deletions

View File

@ -8,120 +8,72 @@ import {
TouchableOpacity,
Image,
AlertIOS,
CameraRoll
CameraRoll,
Dimensions
} from 'react-native';
import _ from 'lodash';
import Immutable from 'seamless-immutable';
import {
CameraKitGallery
CameraKitGalleryView
} from 'react-native-camera-kit';
var groupByEveryN = require('groupByEveryN');
const ds = new ListView.DataSource({
rowHasChanged: (r1, r2) => r1 !== r2
});
function renderImage(asset) {
var imageSize = 150;
var imageStyle = [styles.image, {width: imageSize, height: imageSize}];
return (
<Image
source={asset.node.image}
style={imageStyle}
/>
);
const size = Math.floor((Dimensions.get('window').width) / 3);
const innerSize = size - 6;
export default class GalleryScreenNative extends Component {
static navigatorButtons = {
rightButtons: [
{
title: 'Done',
id: 'navBarDone'
}
]
};
export default class GalleryScreen extends Component {
async onNavigatorEvent(event) {
if (event.type === 'NavBarButtonPress') {
if (event.id === 'navBarDone') {
const selected = await this.gallery.getSelectedImages();
this.props.navigator.push({
screen: 'media.PreviewScreen',
title: 'Preview',
backButtonTitle: 'Albums',
passProps: {
imagesData: selected.selectedImages
},
navigatorStyle: {
navBarHidden: true
}
});
}
}
}
constructor(props) {
super(props);
const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
this.props.navigator.setOnNavigatorEvent(this.onNavigatorEvent.bind(this));
this.state = {
albums: {},
dataSource: ds,
albumName: this.props.albumName,
assets: []
}
}
componentDidMount() {
if (this.state.albumName) {
CameraKitGallery.getPhotosForAlbum(this.state.albumName, 100, (data) => this._appendAssets(data), (e) => logError(e));
album: this.props.album,
}
}
render() {
return (
<View style={styles.container}>
<Text>{this.state.albumName}</Text>
<ListView
renderRow={this._renderRow}
style={{flex: 1, backgroundColor: 'blue', }}
dataSource={this.state.dataSource}
/>
</View>
);
}
rendererChanged() {
console.log('ppppp');
var ds = new ListView.DataSource({rowHasChanged: this._rowHasChanged});
this.state.dataSource = ds.cloneWithRows(
groupByEveryN(this.state.assets, this.props.imagesPerRow)
);
}
_renderImage(asset) {
var imageSize = 150;
var imageStyle = [styles.image, {width: imageSize, height: imageSize}];
return (
<Image
source={asset.node.image}
style={imageStyle}
/>
);
}
_renderRow(rowData:Array<Image>, sectionID:string, rowID:string) {
console.log(rowID)
var images = rowData.map((image) => {
if (image === null) {
return null;
}
return renderImage(image);
});
return (
<View style={styles.row} key={rowID}>
{images}
</View>
);
}
_appendAssets(data) {
console.log('datadata', data);
if (data) {
var assets = data.edges;
var newState:Object = {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, 25)
);
}
this.setState(newState);
}
<CameraKitGalleryView
ref={(gallery) => {
this.gallery = gallery;
}}
style={{flex:1}}
albumName={this.state.album.albumName}/>
)
}
}
@ -146,9 +98,16 @@ const styles = StyleSheet.create({
flex: 1,
},
image: {
margin: 4,
marginBottom: 0
width: innerSize,
height: innerSize,
alignItems: 'center',
justifyContent: 'center'
},
rowContainer: {
width: size,
height: size,
alignItems: 'center',
justifyContent: 'center',
},
});

View File

@ -31,7 +31,7 @@
* on the same Wi-Fi network.
*/
jsCodeLocation = [NSURL URLWithString:@"http://172.31.9.77:8081/index.ios.bundle?platform=ios&dev=true"];
jsCodeLocation = [NSURL URLWithString:@"http://localhost:8081/index.ios.bundle?platform=ios&dev=true"];
/**
* OPTION 2

View File

@ -1,11 +1,9 @@
import CameraKitGallery from './src/CameraKitGallery';
import CameraKitCamera from './src/CameraKitCamera';
import CameraKitGalleryView from './src/CameraKitGalleryView';
export {
CameraKitGallery,
CameraKitCamera,
CameraKitGalleryView
};