Skip to content

Commit 637ab13

Browse files
committed
Support react-native
1 parent 0e01f74 commit 637ab13

File tree

3 files changed

+88
-36
lines changed

3 files changed

+88
-36
lines changed

README.md

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
# particles-bg
1+
# react-native-particles-bg
22

33
[![NPM](https://img.shields.io/npm/v/particles-bg.svg)](https://www.npmjs.com/package/particles-bg) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)
44

@@ -39,7 +39,7 @@ npm install --save particles-bg
3939
```jsx
4040
import React, { Component } from 'react'
4141

42-
import ParticlesBg from 'particles-bg'
42+
import ParticlesBg from 'react-native-particles-bg'
4343

4444
class Example extends Component {
4545
render () {
@@ -123,10 +123,9 @@ You can use type="custom" to achieve a higher degree of freedom for the particle
123123
};
124124

125125
return (
126-
<div>
127-
<SignIn />
126+
<View style={{width: 360, height :700, flex: 1}}>
128127
<ParticlesBg type="custom" config={config} bg={true} />
129-
</div>
128+
</View>
130129
)
131130
```
132131

package.json

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -51,7 +51,11 @@
5151
"src"
5252
],
5353
"dependencies": {
54+
"@flyskywhy/react-native-gcanvas": "^2.0.0",
5455
"proton-engine": "^4.1.3",
5556
"raf-manager": "^0.3.0"
57+
},
58+
"peerDependencies": {
59+
"react-native": "^0.60.6"
5660
}
5761
}

src/particles/Canvas.js

Lines changed: 80 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -1,42 +1,62 @@
11
import React from "react";
2+
import {Platform, View} from 'react-native';
23
import RAFManager from "raf-manager";
4+
import {GCanvasView} from '@flyskywhy/react-native-gcanvas';
35

46
export default class Canvas extends React.Component {
57
constructor(props) {
68
super(props);
79

810
this._id = 0;
911
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 = {};
1117
}
1218

1319
componentDidMount() {
14-
setTimeout(() => {
15-
this.initCanvas();
20+
if (Platform.OS === 'web') {
1621
this.resize = this.resize.bind(this);
1722
window.addEventListener("resize", this.resize);
18-
}, 100);
23+
}
1924

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);
2226
}
2327

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+
}
2644
if (this.props.globalCompositeOperation) {
27-
const context = canvas.getContext("2d");
45+
const context = this.canvas.getContext("2d");
2846
context.globalCompositeOperation = this.props.globalCompositeOperation;
2947
}
3048

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);
3454
}
3555

3656
heartbeatDetectionCanvasSize(canvas) {
3757
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;
4060
if (newHeight !== this.size.height) {
4161
const { width, height } = this.setCanvasSize(canvas);
4262
this.props.onResize && this.props.onResize(width, height);
@@ -46,23 +66,24 @@ export default class Canvas extends React.Component {
4666
}
4767

4868
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){}
5474
}
5575
}
5676

5777
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+
}
6182
}
6283

6384
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;
6687

6788
this.size.width = width;
6889
this.size.height = height;
@@ -97,13 +118,41 @@ export default class Canvas extends React.Component {
97118
this.props.onMouseDown && this.props.onMouseDown(e);
98119
}
99120

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+
100135
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+
}
108157
}
109158
}

0 commit comments

Comments
 (0)