|
@@ -1,18 +1,6 @@
|
1
|
|
-// import React, { PureComponent } from 'react';
|
2
|
|
-// import { AppRegistry, StyleSheet, Text, TouchableOpacity, View } from 'react-native';
|
|
1
|
+import React, { PureComponent } from 'react';
|
|
2
|
+import { AppRegistry, StyleSheet, Text, TouchableOpacity, View } from 'react-native';
|
3
|
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 { StyleSheet, View, SafeAreaView, Text, Image, Modal,TouchableOpacity } from 'react-native';
|
7
|
|
-
|
8
|
|
-// import Btn from 'react-native-camera/example/src/Btn';
|
9
|
|
-// import Desc from 'react-native-camera/example/src/Desc';
|
10
|
|
-
|
11
|
|
-import Btn from './Btn';
|
12
|
|
-import Desc from './Desc';
|
13
|
|
-
|
14
|
|
-
|
15
|
|
-
|
16
|
4
|
|
17
|
5
|
class ExampleApp extends PureComponent {
|
18
|
6
|
render() {
|
|
@@ -64,16 +52,7 @@ class ExampleApp extends PureComponent {
|
64
|
52
|
};
|
65
|
53
|
}
|
66
|
54
|
|
67
|
|
-
|
68
|
|
-
|
69
|
|
-
|
70
|
|
-
|
71
|
|
-
|
72
|
|
-
|
73
|
|
-
|
74
|
|
-
|
75
|
|
-
|
76
|
|
-const styles0 = StyleSheet.create({
|
|
55
|
+const styles = StyleSheet.create({
|
77
|
56
|
container: {
|
78
|
57
|
flex: 1,
|
79
|
58
|
flexDirection: 'column',
|
|
@@ -96,95 +75,4 @@ const styles0 = StyleSheet.create({
|
96
|
75
|
});
|
97
|
76
|
|
98
|
77
|
|
99
|
|
-
|
100
|
|
-
|
101
|
|
-const styles = StyleSheet.create({
|
102
|
|
- root: {
|
103
|
|
- padding: 50,
|
104
|
|
- },
|
105
|
|
- preview: {
|
106
|
|
- marginTop: 20,
|
107
|
|
- width: 200,
|
108
|
|
- height: 200,
|
109
|
|
- borderWidth: 1,
|
110
|
|
- borderColor: '#aaa',
|
111
|
|
- },
|
112
|
|
- modal: {
|
113
|
|
- alignSelf: 'flex-end',
|
114
|
|
- padding: 20,
|
115
|
|
- backgroundColor: '#eee',
|
116
|
|
- },
|
117
|
|
- buttons: {
|
118
|
|
- flexDirection: 'row',
|
119
|
|
- },
|
120
|
|
-});
|
121
|
|
-
|
122
|
|
-const ModalExample = () => {
|
123
|
|
- const [opened, setOpened] = useState(false);
|
124
|
|
- const [source, setSource] = useState(null);
|
125
|
|
- const modalRef = useRef();
|
126
|
|
-
|
127
|
|
- const onOpenModal = useCallback(() => setOpened(true), []);
|
128
|
|
-
|
129
|
|
- const onCapture = useCallback(uri => {
|
130
|
|
- setSource({ uri });
|
131
|
|
- setOpened(false);
|
132
|
|
- }, []);
|
133
|
|
-
|
134
|
|
- const onPressCapture = useCallback(() => {
|
135
|
|
- captureScreen().then(onCapture);
|
136
|
|
- }, [onCapture]);
|
137
|
|
-
|
138
|
|
- const onPressCaptureModalContent = useCallback(() => {
|
139
|
|
- captureRef(modalRef).then(onCapture);
|
140
|
|
- }, [onCapture]);
|
141
|
|
-
|
142
|
|
- return (
|
143
|
|
- <Fragment>
|
144
|
|
- <SafeAreaView>
|
145
|
|
- <View style={styles.root}>
|
146
|
|
- <Desc
|
147
|
|
- desc="We can notice that, in current implementation, react-native-view-shot does not
|
148
|
|
- screenshot Modal as part of a captureScreen."
|
149
|
|
- />
|
150
|
|
- <Btn onPress={onOpenModal} label="Open Modal" />
|
151
|
|
- <Image fadeDuration={0} source={source} style={styles.preview} resizeMode="contain" />
|
152
|
|
- </View>
|
153
|
|
- </SafeAreaView>
|
154
|
|
-
|
155
|
|
- <Modal transparent animated animationType="slide" visible={opened}>
|
156
|
|
- <SafeAreaView>
|
157
|
|
- <View ref={modalRef} style={styles.modal}>
|
158
|
|
- <Text>This is a modal</Text>
|
159
|
|
- <View style={styles.buttons}>
|
160
|
|
- <Btn onPress={onPressCapture} label="Capture Screen" />
|
161
|
|
- <Btn onPress={onPressCaptureModalContent} label="Capture This" />
|
162
|
|
- </View>
|
163
|
|
- </View>
|
164
|
|
- </SafeAreaView>
|
165
|
|
- </Modal>
|
166
|
|
- </Fragment>
|
167
|
|
- );
|
168
|
|
-};
|
169
|
|
-
|
170
|
|
-ModalExample.navigationOptions = {
|
171
|
|
- title: 'Modal',
|
172
|
|
-};
|
173
|
|
-
|
174
|
|
-
|
175
|
|
-
|
176
|
|
-
|
177
|
|
-
|
178
|
|
-
|
179
|
|
-
|
180
|
|
-
|
181
|
|
-
|
182
|
|
-
|
183
|
|
-
|
184
|
|
-
|
185
|
|
-
|
186
|
|
-
|
187
|
|
-
|
188
|
|
-
|
189
|
|
-
|
190
|
|
-export {ExampleApp,ModalExample}
|
|
78
|
+export {ExampleApp}
|