Portal简单版

import React, { Component } from "react";
import {
    Text,
    DeviceEventEmitter,
    Button,
    View,
    Dimensions
} from "react-native";
const w_height = Dimensions.get("window").height
class PortalHost extends Component {
    state = {
        nodeList: {},
    }
    id: number = 0
    componentWillMount() {
        DeviceEventEmitter.addListener("addType", ({node, id}) => {
            const { nodeList } = this.state;
            this.setState({
                nodeList: {
                    ...nodeList,
                    [id]: node
                }
            });
        });
        DeviceEventEmitter.addListener("removeType", id => {
            const { nodeList } = this.state;
            delete nodeList[id];
            this.setState({
                nodeList
            });
        });
    }
    render() {
        const { nodeList } = this.state;
        return (
            
                {this.props.children}
                {Object.keys(nodeList).map((key)=>{
                    return (
                        
                            {nodeList[key]}
                        
                    );
                })}
                {/* {node} */}
            
        );
    }
}
class Portal extends Component {
    static id = 0;
    static Host = PortalHost;
    static add = (node: JSX.Element) => {
        Portal.id++;
        DeviceEventEmitter.emit("addType", { node, id: Portal.id });
        return Portal.id;
    };
    static remove = (id: number) => {
        DeviceEventEmitter.emit("removeType", id);
    };
    render() {
        return null;
    }
}
class App extends Component {
    render() {
        return (
            
                
                    
                         {
                                const id = Portal.add(
                                    {
                                            Portal.remove(id);
                                        }}
                                    >
                                        弹出层
                                    
                                );
                            }}
                        />
                    
                
            
        );
    }
}
export default App;