No Description

App.js 1.7KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970
  1. import React from 'react';
  2. import { StyleSheet, Text, View, TouchableOpacity, Image, Dimensions } from 'react-native';
  3. import ImagePicker from 'react-native-image-picker';
  4. import RNThumbnail from 'react-native-thumbnail';
  5. const screenW = Dimensions.get('window').width
  6. export default class App extends React.Component {
  7. constructor(props) {
  8. super(props)
  9. this.state = {
  10. thumbnail: null,
  11. width: null,
  12. height: null
  13. }
  14. }
  15. openPicker = () => {
  16. var options = {
  17. title: 'Select Video',
  18. storageOptions: {
  19. skipBackup: true,
  20. path: 'images'
  21. },
  22. mediaType: 'video'
  23. };
  24. ImagePicker.showImagePicker(options, (response) => {
  25. console.log('Response = ', response);
  26. if (response.didCancel) {
  27. console.log('User cancelled image picker');
  28. }
  29. else if (response.error) {
  30. console.log('ImagePicker Error: ', response.error);
  31. }
  32. else {
  33. RNThumbnail.get(response.uri).then((result) => {
  34. this.setState({
  35. thumbnail: result.path,
  36. width: result.width,
  37. height: result.height
  38. })
  39. })
  40. }
  41. });
  42. }
  43. render() {
  44. const { thumbnail, width, height } = this.state
  45. const imgW = screenW
  46. const imgH = imgW * height / width
  47. return (
  48. <View style={styles.container}>
  49. <TouchableOpacity onPress={this.openPicker}><Text>Click Me</Text></TouchableOpacity>
  50. {thumbnail ? <Image style={{ width: imgW, height: imgH }} source={{ isStatic: true, uri: thumbnail }} /> : null}
  51. </View>
  52. );
  53. }
  54. }
  55. const styles = StyleSheet.create({
  56. container: {
  57. flex: 1,
  58. backgroundColor: '#fff',
  59. alignItems: 'center',
  60. justifyContent: 'center',
  61. },
  62. });