2016-05-18 12:07:36 +02:00
|
|
|
import React, {Component} from 'react';
|
|
|
|
import {View, Text, StyleSheet, ScrollView, Image, TouchableOpacity} from 'react-native';
|
|
|
|
|
|
|
|
import {NativeModules} from 'react-native';
|
|
|
|
var ImagePicker = NativeModules.ImageCropPicker;
|
|
|
|
|
|
|
|
const styles = StyleSheet.create({
|
|
|
|
container: {
|
|
|
|
flex: 1,
|
|
|
|
justifyContent: 'center',
|
|
|
|
alignItems: 'center'
|
|
|
|
},
|
|
|
|
button: {
|
|
|
|
backgroundColor: 'blue',
|
|
|
|
marginBottom: 10
|
|
|
|
},
|
|
|
|
text: {
|
|
|
|
color: 'white',
|
|
|
|
fontSize: 20
|
|
|
|
}
|
|
|
|
});
|
|
|
|
|
|
|
|
export default class App extends Component {
|
|
|
|
|
|
|
|
constructor() {
|
|
|
|
super();
|
|
|
|
this.state = {
|
|
|
|
image: null,
|
|
|
|
images: null
|
|
|
|
};
|
|
|
|
}
|
|
|
|
|
|
|
|
pickSingle(cropit) {
|
|
|
|
ImagePicker.openPicker({
|
|
|
|
width: 300,
|
|
|
|
height: 300,
|
|
|
|
cropping: cropit
|
|
|
|
}).then(image => {
|
2016-06-20 12:33:05 +02:00
|
|
|
console.log('received image', image);
|
2016-05-18 12:07:36 +02:00
|
|
|
this.setState({
|
|
|
|
image: {uri: image.path, width: image.width, height: image.height},
|
|
|
|
images: null
|
|
|
|
});
|
|
|
|
}).catch(e => {});
|
|
|
|
}
|
|
|
|
|
|
|
|
pickMultiple() {
|
|
|
|
ImagePicker.openPicker({
|
|
|
|
multiple: true
|
|
|
|
}).then(images => {
|
|
|
|
this.setState({
|
|
|
|
image: null,
|
|
|
|
images: images.map(i => {
|
2016-06-20 12:33:05 +02:00
|
|
|
console.log('received image', i);
|
2016-05-18 12:07:36 +02:00
|
|
|
return {uri: i.path, width: i.width, height: i.height};
|
|
|
|
})
|
|
|
|
});
|
|
|
|
}).catch(e => {});
|
|
|
|
}
|
|
|
|
|
|
|
|
scaledHeight(oldW, oldH, newW) {
|
|
|
|
return (oldH / oldW) * newW;
|
|
|
|
}
|
|
|
|
|
|
|
|
render() {
|
|
|
|
return <View style={styles.container}>
|
|
|
|
|
|
|
|
<ScrollView>
|
|
|
|
{this.state.image ? <Image style={{width: this.state.image.width, height: this.state.image.height}} source={this.state.image} /> : null}
|
|
|
|
{this.state.images ? this.state.images.map(i => <Image key={i.uri} style={{width: 300, height: this.scaledHeight(i.width, i.height, 300)}} source={i} />) : null}
|
|
|
|
</ScrollView>
|
|
|
|
|
|
|
|
<TouchableOpacity onPress={() => this.pickSingle(false)} style={styles.button}>
|
|
|
|
<Text style={styles.text}>Select Single</Text>
|
|
|
|
</TouchableOpacity>
|
|
|
|
<TouchableOpacity onPress={() => this.pickSingle(true)} style={styles.button}>
|
|
|
|
<Text style={styles.text}>Select Single With Cropping</Text>
|
|
|
|
</TouchableOpacity>
|
|
|
|
<TouchableOpacity onPress={this.pickMultiple.bind(this)} style={styles.button}>
|
|
|
|
<Text style={styles.text}>Select Multiple</Text>
|
|
|
|
</TouchableOpacity>
|
|
|
|
</View>;
|
|
|
|
}
|
|
|
|
}
|