1
1
import React from "react" ;
2
+ import { Platform , View } from 'react-native' ;
2
3
import RAFManager from "raf-manager" ;
4
+ import { GCanvasView } from '@flyskywhy/react-native-gcanvas' ;
3
5
4
6
export default class Canvas extends React . Component {
5
7
constructor ( props ) {
6
8
super ( props ) ;
7
9
8
10
this . _id = 0 ;
9
11
this . size = { width : 0 , height : 0 } ;
10
- this . canvasRef = React . createRef ( ) ;
12
+ this . canvas = null ;
13
+ this . state = {
14
+ isLayouted : false ,
15
+ } ;
16
+ this . style = { } ;
11
17
}
12
18
13
19
componentDidMount ( ) {
14
- setTimeout ( ( ) => {
15
- this . initCanvas ( ) ;
20
+ if ( Platform . OS === 'web' ) {
16
21
this . resize = this . resize . bind ( this ) ;
17
22
window . addEventListener ( "resize" , this . resize ) ;
18
- } , 100 ) ;
23
+ }
19
24
20
- const canvas = this . canvasRef . current ;
21
- this . props . onCanvasDidMount && this . props . onCanvasDidMount ( canvas ) ;
25
+ this . canvas && this . props . onCanvasDidMount && this . props . onCanvasDidMount ( this . canvas ) ;
22
26
}
23
27
24
- initCanvas ( ) {
25
- const canvas = this . canvasRef . current ;
28
+ initCanvas ( canvas ) {
29
+ if ( this . canvas ) {
30
+ return ;
31
+ }
32
+
33
+ this . canvas = canvas ;
34
+ let width ;
35
+ let height ;
36
+
37
+ if ( Platform . OS === 'web' ) {
38
+ width = this . canvas . clientWidth ;
39
+ height = this . canvas . clientHeight ;
40
+ } else {
41
+ width = this . canvas . width ;
42
+ height = this . canvas . height ;
43
+ }
26
44
if ( this . props . globalCompositeOperation ) {
27
- const context = canvas . getContext ( "2d" ) ;
45
+ const context = this . canvas . getContext ( "2d" ) ;
28
46
context . globalCompositeOperation = this . props . globalCompositeOperation ;
29
47
}
30
48
31
- const { width, height } = this . setCanvasSize ( canvas ) ;
32
- this . heartbeatDetectionCanvasSize ( canvas ) ;
33
- this . props . onCanvasInited ( canvas , width , height ) ;
49
+ if ( Platform . OS === 'web' ) {
50
+ this . setCanvasSize ( this . canvas ) ;
51
+ this . heartbeatDetectionCanvasSize ( this . canvas ) ;
52
+ }
53
+ this . props . onCanvasInited ( this . canvas , width , height ) ;
34
54
}
35
55
36
56
heartbeatDetectionCanvasSize ( canvas ) {
37
57
this . _id = setInterval ( ( ) => {
38
- if ( this . canvasRef . current ) {
39
- const newHeight = this . canvasRef . current . clientHeight ;
58
+ if ( this . canvas ) {
59
+ const newHeight = this . canvas . clientHeight ;
40
60
if ( newHeight !== this . size . height ) {
41
61
const { width, height } = this . setCanvasSize ( canvas ) ;
42
62
this . props . onResize && this . props . onResize ( width , height ) ;
@@ -46,23 +66,24 @@ export default class Canvas extends React.Component {
46
66
}
47
67
48
68
componentWillUnmount ( ) {
49
- try {
50
- window . removeEventListener ( "resize" , this . resize ) ;
51
- clearInterval ( this . _id ) ;
52
- } catch ( e ) {
53
-
69
+ if ( Platform . OS === 'web' ) {
70
+ try {
71
+ window . removeEventListener ( "resize" , this . resize ) ;
72
+ clearInterval ( this . _id ) ;
73
+ } catch ( e ) { }
54
74
}
55
75
}
56
76
57
77
resize ( ) {
58
- const canvas = this . canvasRef . current ;
59
- const { width, height } = this . setCanvasSize ( canvas ) ;
60
- this . props . onResize && this . props . onResize ( width , height ) ;
78
+ if ( this . canvas ) {
79
+ const { width, height } = this . setCanvasSize ( this . canvas ) ;
80
+ this . props . onResize && this . props . onResize ( width , height ) ;
81
+ }
61
82
}
62
83
63
84
setCanvasSize ( canvas ) {
64
- const width = this . canvasRef . current . clientWidth ;
65
- const height = this . canvasRef . current . clientHeight ;
85
+ const width = this . canvas . clientWidth ;
86
+ const height = this . canvas . clientHeight ;
66
87
67
88
this . size . width = width ;
68
89
this . size . height = height ;
@@ -97,13 +118,41 @@ export default class Canvas extends React.Component {
97
118
this . props . onMouseDown && this . props . onMouseDown ( e ) ;
98
119
}
99
120
121
+ _onLayout ( event ) {
122
+ const {
123
+ width,
124
+ height,
125
+ } = event . nativeEvent . layout ;
126
+ this . style = this . getStyle ( ) ;
127
+ this . style . width = width ;
128
+ this . style . height = height ;
129
+
130
+ this . setState ( {
131
+ isLayouted : true ,
132
+ } ) ;
133
+ }
134
+
100
135
render ( ) {
101
- return (
102
- < canvas
103
- ref = { this . canvasRef }
104
- onMouseDown = { this . handleMouseDown . bind ( this ) }
105
- style = { this . getStyle ( ) }
106
- />
107
- ) ;
136
+ if ( Platform . OS === 'web' ) {
137
+ return (
138
+ < canvas
139
+ ref = { this . initCanvas . bind ( this ) }
140
+ onMouseDown = { this . handleMouseDown . bind ( this ) }
141
+ style = { this . getStyle ( ) }
142
+ />
143
+ ) ;
144
+ } else {
145
+ return (
146
+ < View onLayout = { this . _onLayout . bind ( this ) } style = { this . getStyle ( ) } >
147
+ { this . state . isLayouted === false ? null :
148
+ < GCanvasView
149
+ onCanvasCreate = { this . initCanvas . bind ( this ) }
150
+ onMouseDown = { this . handleMouseDown . bind ( this ) }
151
+ style = { this . style }
152
+ />
153
+ }
154
+ </ View >
155
+ ) ;
156
+ }
108
157
}
109
158
}
0 commit comments