瀏覽代碼

fixed androidx annotation and create example view shoot scrollview

Chuli jimmi Manurung 5 年之前
父節點
當前提交
1fe5b4cda3

+ 3
- 3
android/build.gradle 查看文件

@@ -11,7 +11,7 @@ buildscript {
11 11
             jcenter()
12 12
         }
13 13
         dependencies {
14
-            classpath 'com.android.tools.build:gradle:2.3.0'
14
+            classpath 'com.android.tools.build:gradle:3.4.1'
15 15
         }
16 16
     }
17 17
 }
@@ -19,12 +19,12 @@ buildscript {
19 19
 apply plugin: 'com.android.library'
20 20
 
21 21
 android {
22
-    compileSdkVersion safeExtGet('compileSdkVersion', 27)
22
+    compileSdkVersion safeExtGet('compileSdkVersion', 28)
23 23
     buildToolsVersion safeExtGet('buildToolsVersion', '28.0.3')
24 24
 
25 25
     defaultConfig {
26 26
         minSdkVersion safeExtGet('minSdkVersion', 16)
27
-        targetSdkVersion safeExtGet('targetSdkVersion', 27)
27
+        targetSdkVersion safeExtGet('targetSdkVersion', 28)
28 28
 
29 29
         versionCode 1
30 30
         versionName "1.0"

+ 2
- 2
android/src/main/java/fr/greweb/reactnativeviewshot/DebugViews.java 查看文件

@@ -5,8 +5,8 @@ import android.app.Activity;
5 5
 import android.content.res.Resources;
6 6
 import android.graphics.Matrix;
7 7
 import android.os.Build;
8
-import android.support.annotation.NonNull;
9
-import android.support.v4.util.Pair;
8
+import androidx.annotation.NonNull;
9
+import androidx.core.util.Pair;
10 10
 import android.util.Log;
11 11
 import android.view.View;
12 12
 import android.view.ViewGroup;

+ 1
- 1
android/src/main/java/fr/greweb/reactnativeviewshot/RNViewShotModule.java 查看文件

@@ -5,7 +5,7 @@ import android.app.Activity;
5 5
 import android.content.Context;
6 6
 import android.net.Uri;
7 7
 import android.os.AsyncTask;
8
-import android.support.annotation.NonNull;
8
+import androidx.annotation.NonNull;
9 9
 import android.util.DisplayMetrics;
10 10
 import android.util.Log;
11 11
 

+ 3
- 3
android/src/main/java/fr/greweb/reactnativeviewshot/ViewShot.java 查看文件

@@ -8,9 +8,9 @@ import android.graphics.Matrix;
8 8
 import android.graphics.Paint;
9 9
 import android.graphics.Point;
10 10
 import android.net.Uri;
11
-import android.support.annotation.IntDef;
12
-import android.support.annotation.NonNull;
13
-import android.support.annotation.StringDef;
11
+import androidx.annotation.IntDef;
12
+import androidx.annotation.NonNull;
13
+import androidx.annotation.StringDef;
14 14
 import android.util.Base64;
15 15
 import android.util.Log;
16 16
 import android.view.TextureView;

+ 112
- 0
example/Viewshoot.js 查看文件

@@ -0,0 +1,112 @@
1
+/**
2
+ * Sample How To Screenshot Screen inside of ScrollView
3
+ * The original github from 
4
+ * https://github.com/gre/react-native-view-shot
5
+ */
6
+import React, {Component} from 'react';
7
+import {ScrollView, StyleSheet, Text, View, Button, Image, } from 'react-native';
8
+
9
+import ViewShot from "react-native-view-shot";
10
+
11
+export default class App extends Component {
12
+    constructor(props) {
13
+        super(props)
14
+        this.state={
15
+            error: null,
16
+            res: null,
17
+            options: {
18
+                format: "jpg",
19
+                quality: 0.9
20
+            }
21
+        }
22
+    }
23
+
24
+    renderContent()
25
+	{
26
+		const data = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23];
27
+		return data.map((item,index) => {
28
+			return (
29
+				<View style={styles.item} key={index}>
30
+					<Text>{item}</Text>
31
+				</View>
32
+			);
33
+		})
34
+	}
35
+
36
+    renderResultSnapshot()
37
+    {
38
+        if(this.state.res!==null)
39
+        {
40
+        console.log('Result on return snapshot: ', this.state.res);
41
+        return(
42
+            <Image
43
+                fadeDuration={0}
44
+                resizeMode="contain"
45
+                style={styles.previewImage}
46
+                source={this.state.res}
47
+            />
48
+        );
49
+        }
50
+
51
+        return;
52
+    }
53
+
54
+    
55
+
56
+    renderShootButton(){
57
+        return(
58
+            <Button
59
+                onPress={ async () => await this.captureViewShoot()}
60
+                title="Shoot Me"
61
+                color="#841584"
62
+            />
63
+        )
64
+    }
65
+    
66
+    captureViewShoot()
67
+    {
68
+        this.refs.full.capture().then(uri => {
69
+            console.log("do something with ", uri);
70
+            this.setState({res: {uri: uri}})
71
+        });
72
+    }
73
+
74
+    renderViewShot()
75
+    {
76
+        return(
77
+            <ScrollView style={styles.container}>
78
+                <ViewShot 
79
+                    ref="full" 
80
+                    options={{ format: this.state.options.format, quality: this.state.options.quality }} 
81
+                    style={styles.container}
82
+                >
83
+                    {this.renderResultSnapshot()}
84
+                    {this.renderContent()}
85
+                    {this.renderShootButton()}
86
+                </ViewShot>
87
+            </ScrollView>
88
+        )
89
+    }
90
+
91
+    render() {
92
+        return this.renderViewShot();
93
+    }
94
+}
95
+
96
+const styles = StyleSheet.create({
97
+    container: {
98
+        flex: 1,
99
+        backgroundColor: '#fff'
100
+    },
101
+    content: {
102
+        padding: 10,
103
+        backgroundColor: '#fff'
104
+    },
105
+    item: {
106
+        height: 50,
107
+    },
108
+    previewImage: {
109
+        width: 375,
110
+        height: 300
111
+    },
112
+});

+ 10
- 3
src/index.js 查看文件

@@ -171,6 +171,10 @@ function checkCompatibleProps(props: Props) {
171 171
 export default class ViewShot extends Component<Props> {
172 172
   static captureRef = captureRef;
173 173
   static releaseCapture = releaseCapture;
174
+  constructor(props) {
175
+    super(props)
176
+    this.state={}
177
+  }
174 178
   root: ?View;
175 179
 
176 180
   _raf: *;
@@ -249,10 +253,13 @@ export default class ViewShot extends Component<Props> {
249 253
     }
250 254
   }
251 255
 
252
-  componentWillReceiveProps(nextProps: Props) {
253
-    if (nextProps.captureMode !== this.props.captureMode) {
254
-      this.syncCaptureLoop(nextProps.captureMode);
256
+  static getDerivedStateFromProps(props, state) {
257
+    if(props.captureMode !== undefined) {
258
+      if (nextProps.captureMode !== this.props.captureMode) {
259
+        this.syncCaptureLoop(nextProps.captureMode);
260
+      }
255 261
     }
262
+    return null;
256 263
   }
257 264
 
258 265
   componentDidUpdate() {