feat: 实现Sibling基本功能

Author: m860

index.js

@@ -0,0 +1,7 @@
+import {AppRegistry} from "react-native"
+import WrapperComponent from "./src/WrapperComponent"
+import Sibling from "./src/Sibling"
+
+AppRegistry.setWrapperComponentProvider(() => WrapperComponent);
+
+export default Sibling;

package.json

@@ -5,7 +5,7 @@
   "main": "index.js",
   "scripts": {
     "test": "jest",
-    "cm":"git-cz"
+    "cm": "git-cz"
   },
   "repository": {
     "type": "git",
@@ -19,7 +19,15 @@
   "homepage": "https://github.com/react-native-pure/sibling#readme",
   "devDependencies": {
     "commitizen": "^3.0.7",
-    "cz-conventional-changelog": "^2.1.0"
+    "cz-conventional-changelog": "^2.1.0",
+    "fbemitter": "^2.1.1",
+    "react": "16.0.0-alpha.12",
+    "react-native": "^0.47"
+  },
+  "peerDependencies": {
+    "fbemitter": "^2",
+    "react-native": ">= 0.47.0",
+    "react": ">= 16.0.0"
   },
   "config": {
     "commitizen": {

src/Sibling.js

@@ -0,0 +1,24 @@
+import * as React from "react"
+import SiblingEmitter, {SiblingEvents} from "./SiblingEmitter";
+
+class Sibling {
+    constructor() {
+        this.id = 0;
+    }
+
+    append(element: React.Element) {
+        const id = this.id;
+        SiblingEmitter.emit(SiblingEvents.append, {
+            id: id,
+            node: React.cloneElement(element, {
+                key: `sibling-${id}`
+            })
+        });
+        this.id++;
+        return function () {
+            SiblingEmitter.emit(SiblingEvents.remove, id);
+        };
+    }
+}
+
+export default new Sibling();

src/SiblingEmitter.js

@@ -0,0 +1,8 @@
+import {EventEmitter} from "fbemitter"
+
+export const SiblingEvents = {
+    append: "append",
+    remove: "remove"
+};
+
+export default new EventEmitter();

src/Siblings.js

@@ -0,0 +1,53 @@
+import * as React from "react"
+import SiblingEmitter, {SiblingEvents} from "./SiblingEmitter";
+import type {NodeItem} from "./Types";
+
+type State = {
+    elements: {
+        [key: number]: React.Element
+    }
+};
+
+export default class Siblings extends React.PureComponent<void, State> {
+
+    _listeners = [];
+
+    state = {
+        elements: {}
+    };
+
+    render() {
+        const keys = Object.keys(this.state.elements);
+        if (keys.length > 0) {
+            return keys.map((key) => this.state.elements[key]);
+        }
+        return null;
+    }
+
+    componentDidMount() {
+        this._listeners.push(
+            SiblingEmitter.addListener(SiblingEvents.append, (item: NodeItem) => {
+                this.setState(({elements}) => {
+                    return {
+                        elements: {
+                            ...elements,
+                            [item.id]: item.node
+                        }
+                    }
+                });
+            })
+        );
+        this._listeners.push(
+            SiblingEmitter.addListener(SiblingEvents.remove, (id: number) => {
+                this.setState(({elements}) => {
+                    delete elements[id];
+                    return {elements};
+                })
+            })
+        )
+    }
+
+    componentWillUnmount() {
+        this._listeners.forEach(listener => listener.remove());
+    }
+}

src/Types.js

@@ -0,0 +1,6 @@
+import * as React from "react";
+
+export type NodeItem = {
+    id: number,
+    node: React.Node
+};

src/WrapperComponent.js

@@ -0,0 +1,20 @@
+import * as React from "react";
+import {View, StyleSheet} from "react-native"
+import Siblings from "./Siblings";
+
+const styles = StyleSheet.create({
+    container: {
+        flex: 1
+    }
+})
+
+function WrapperComponent(props) {
+    return (
+        <View style={styles.container}>
+            {props.children}
+            <Siblings/>
+        </View>
+    );
+}
+
+export default React.memo(WrapperComponent);