86 lines
2.3 KiB
JavaScript
86 lines
2.3 KiB
JavaScript
import React, {Component} from 'react';
|
|
import {
|
|
AppRegistry,
|
|
Text,
|
|
View,
|
|
ListView,
|
|
TouchableOpacity,
|
|
Image,
|
|
AlertIOS,
|
|
CameraRoll,
|
|
Dimensions
|
|
} from 'react-native';
|
|
|
|
import {
|
|
CameraKitGalleryView
|
|
} from 'react-native-camera-kit';
|
|
|
|
import CameraScreen from './CameraScreen';
|
|
|
|
const resolveAssetSource = require('react-native/Libraries/Image/resolveAssetSource');
|
|
|
|
export default class GalleryScreenNative extends Component {
|
|
|
|
constructor(props) {
|
|
super(props);
|
|
this.state = {
|
|
album: this.props.albumName,
|
|
images: {},
|
|
shouldRenderCameraScreen: false
|
|
}
|
|
}
|
|
|
|
render() {
|
|
if (this.state.shouldRenderCameraScreen) {
|
|
return (<CameraScreen/>);
|
|
}
|
|
|
|
return (
|
|
<CameraKitGalleryView
|
|
ref={(gallery) => {
|
|
this.gallery = gallery;
|
|
}}
|
|
style={{flex:1, margin: 0, backgroundColor: '#ffffff', marginTop: 50}}
|
|
albumName={this.state.album}
|
|
minimumInteritemSpacing={10}
|
|
minimumLineSpacing={10}
|
|
columnCount={3}
|
|
selectedImages={Object.keys(this.state.images)}
|
|
onSelected={(result) => {
|
|
}}
|
|
onTapImage={this.onTapImage.bind(this)}
|
|
selection={{
|
|
selectedImage: require('./images/selected.png'),
|
|
imagePosition: 'bottom-right',
|
|
imageSizeAndroid: 'large',
|
|
enable: (Object.keys(this.state.images).length < 3)
|
|
}}
|
|
fileTypeSupport={{
|
|
supportedFileTypes: ['image/jpeg'],
|
|
unsupportedOverlayColor: "#00000055",
|
|
unsupportedImage: require('./images/unsupportedImage.png'),
|
|
//unsupportedText: 'JPEG!!',
|
|
unsupportedTextColor: '#ff0000'
|
|
}}
|
|
customButtonStyle={{
|
|
image: require('./images/openCamera.png'),
|
|
backgroundColor: '#06c4e9'
|
|
}}
|
|
onCustomButtonPress={() => this.setState({shouldRenderCameraScreen: true})}
|
|
/>
|
|
)
|
|
}
|
|
|
|
onTapImage(event) {
|
|
const uri = event.nativeEvent.selected;
|
|
console.log('Tapped on an image: ' + uri);
|
|
|
|
if (this.state.images[uri]) {
|
|
delete this.state.images[uri];
|
|
} else {
|
|
this.state.images[uri] = true;
|
|
}
|
|
this.setState({images: {...this.state.images}})
|
|
}
|
|
}
|