Vous ne pouvez pas sélectionner plus de 25 sujets Les noms de sujets doivent commencer par une lettre ou un nombre, peuvent contenir des tirets ('-') et peuvent comporter jusqu'à 35 caractères.

rn_cam.native.js 4.3KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186
  1. // import React, { PureComponent } from 'react';
  2. import { AppRegistry, StyleSheet, Text, TouchableOpacity, View } from 'react-native';
  3. import { RNCamera } from 'react-native-camera';
  4. import React, { Fragment, useState, useCallback, useRef,PureComponent } from 'react';
  5. import { StyleSheet, View, SafeAreaView, Text, Image, Modal } from 'react-native';
  6. import Btn from 'react-native-camera/example/src/Btn';
  7. import Desc from 'react-native-camera/example/src/Desc';
  8. class ExampleApp extends PureComponent {
  9. render() {
  10. var rn_cam_styles_z = tglob_au.run_dev_cbs("rn_cam_styles",{that:this}) || {}
  11. var rn_cam_styles = rn_cam_styles_z.o
  12. return (
  13. <View style={rn_cam_styles.container || {}}>
  14. <RNCamera
  15. ref={ref => {
  16. this.camera = ref;
  17. }}
  18. style={rn_cam_styles.preview}
  19. type={RNCamera.Constants.Type.back}
  20. flashMode={RNCamera.Constants.FlashMode.on}
  21. androidCameraPermissionOptions={{
  22. title: 'Permission to use camera',
  23. message: 'We need your permission to use your camera',
  24. buttonPositive: 'Ok',
  25. buttonNegative: 'Cancel',
  26. }}
  27. /*
  28. androidRecordAudioPermissionOptions={{
  29. title: 'Permission to use audio recording',
  30. message: 'We need your permission to use your audio',
  31. buttonPositive: 'Ok',
  32. buttonNegative: 'Cancel',
  33. }}
  34. */
  35. onGoogleVisionBarcodesDetected={({ barcodes }) => {
  36. console.log(barcodes);
  37. }}
  38. />
  39. <View style={{ flex: 0, flexDirection: 'row', justifyContent: 'center' }}>
  40. <TouchableOpacity onPress={this.takePicture.bind(this)} style={rn_cam_styles.capture}>
  41. <Text style={{ fontSize: 14 }}> SNAP </Text>
  42. </TouchableOpacity>
  43. </View>
  44. </View>
  45. );
  46. }
  47. takePicture = async () => {
  48. if (this.camera) {
  49. const options = { quality: 0.5, base64: true };
  50. const data = await this.camera.takePictureAsync(options);
  51. console.log(data.uri);
  52. }
  53. };
  54. }
  55. const styles0 = StyleSheet.create({
  56. container: {
  57. flex: 1,
  58. flexDirection: 'column',
  59. backgroundColor: 'black',
  60. },
  61. preview: {
  62. flex: 1,
  63. justifyContent: 'flex-end',
  64. alignItems: 'center',
  65. },
  66. capture: {
  67. flex: 0,
  68. backgroundColor: '#fff',
  69. borderRadius: 5,
  70. padding: 15,
  71. paddingHorizontal: 20,
  72. alignSelf: 'center',
  73. margin: 20,
  74. },
  75. });
  76. const styles = StyleSheet.create({
  77. root: {
  78. padding: 50,
  79. },
  80. preview: {
  81. marginTop: 20,
  82. width: 200,
  83. height: 200,
  84. borderWidth: 1,
  85. borderColor: '#aaa',
  86. },
  87. modal: {
  88. alignSelf: 'flex-end',
  89. padding: 20,
  90. backgroundColor: '#eee',
  91. },
  92. buttons: {
  93. flexDirection: 'row',
  94. },
  95. });
  96. const ModalExample = () => {
  97. const [opened, setOpened] = useState(false);
  98. const [source, setSource] = useState(null);
  99. const modalRef = useRef();
  100. const onOpenModal = useCallback(() => setOpened(true), []);
  101. const onCapture = useCallback(uri => {
  102. setSource({ uri });
  103. setOpened(false);
  104. }, []);
  105. const onPressCapture = useCallback(() => {
  106. captureScreen().then(onCapture);
  107. }, [onCapture]);
  108. const onPressCaptureModalContent = useCallback(() => {
  109. captureRef(modalRef).then(onCapture);
  110. }, [onCapture]);
  111. return (
  112. <Fragment>
  113. <SafeAreaView>
  114. <View style={styles.root}>
  115. <Desc
  116. desc="We can notice that, in current implementation, react-native-view-shot does not
  117. screenshot Modal as part of a captureScreen."
  118. />
  119. <Btn onPress={onOpenModal} label="Open Modal" />
  120. <Image fadeDuration={0} source={source} style={styles.preview} resizeMode="contain" />
  121. </View>
  122. </SafeAreaView>
  123. <Modal transparent animated animationType="slide" visible={opened}>
  124. <SafeAreaView>
  125. <View ref={modalRef} style={styles.modal}>
  126. <Text>This is a modal</Text>
  127. <View style={styles.buttons}>
  128. <Btn onPress={onPressCapture} label="Capture Screen" />
  129. <Btn onPress={onPressCaptureModalContent} label="Capture This" />
  130. </View>
  131. </View>
  132. </SafeAreaView>
  133. </Modal>
  134. </Fragment>
  135. );
  136. };
  137. ModalExample.navigationOptions = {
  138. title: 'Modal',
  139. };
  140. export {ExampleApp,ModalExample}