|
@@ -1,18 +1,21 @@
|
1
|
1
|
import React from 'react';
|
2
|
|
-import { StyleSheet, Text, View, TouchableOpacity } from 'react-native';
|
|
2
|
+import { StyleSheet, Text, View, TouchableOpacity, Image, Dimensions } from 'react-native';
|
3
|
3
|
import ImagePicker from 'react-native-image-picker';
|
4
|
4
|
import RNThumbnail from 'react-native-thumbnail';
|
5
|
5
|
|
|
6
|
+const screenW = Dimensions.get('window').width
|
6
|
7
|
export default class App extends React.Component {
|
7
|
8
|
|
8
|
9
|
constructor(props) {
|
9
|
10
|
super(props)
|
10
|
11
|
this.state = {
|
11
|
|
- thumbnail: null
|
|
12
|
+ thumbnail: null,
|
|
13
|
+ width: null,
|
|
14
|
+ height: null
|
12
|
15
|
}
|
13
|
16
|
}
|
14
|
17
|
|
15
|
|
- openPicker () {
|
|
18
|
+ openPicker = () => {
|
16
|
19
|
var options = {
|
17
|
20
|
title: 'Select Video',
|
18
|
21
|
storageOptions: {
|
|
@@ -32,19 +35,25 @@ export default class App extends React.Component {
|
32
|
35
|
console.log('ImagePicker Error: ', response.error);
|
33
|
36
|
}
|
34
|
37
|
else {
|
35
|
|
- console.log(response.uri)
|
36
|
38
|
RNThumbnail.get(response.uri).then((result) => {
|
37
|
|
- console.log(result.path); // thumbnail path
|
|
39
|
+ this.setState({
|
|
40
|
+ thumbnail: result.path,
|
|
41
|
+ width: result.width,
|
|
42
|
+ height: result.height
|
|
43
|
+ })
|
38
|
44
|
})
|
39
|
45
|
}
|
40
|
46
|
});
|
41
|
47
|
}
|
42
|
48
|
|
43
|
49
|
render() {
|
|
50
|
+ const { thumbnail, width, height } = this.state
|
|
51
|
+ const imgW = screenW
|
|
52
|
+ const imgH = imgW * height / width
|
44
|
53
|
return (
|
45
|
54
|
<View style={styles.container}>
|
46
|
55
|
<TouchableOpacity onPress={this.openPicker}><Text>Click Me</Text></TouchableOpacity>
|
47
|
|
- {this.state.thumbnail ? <Image source={this.state.thumbnail} /> : null}
|
|
56
|
+ {thumbnail ? <Image style={{ width: imgW, height: imgH }} source={{ isStatic: true, uri: thumbnail }} /> : null}
|
48
|
57
|
</View>
|
49
|
58
|
);
|
50
|
59
|
}
|