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 (
            <View style={{ flex: 1 }}>
                <View>{this.props.children}</View>
                {Object.keys(nodeList).map((key)=>{
                    return (
                        <View
                            style={{
                                position: "absolute",
                                top: 0,
                                left: 0,
                                right: 0
                            }}
                        >
                            {nodeList[key]}
                        </View>
                    );
                })}
                {/* <View style={{position: 'absolute', top: 0, left: 0, right: 0}}>{node}</View> */}
            </View>
        );
    }
}
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 (
            <View style={{ height: w_height }}>
                <Portal.Host>
                    <View style={{ paddingTop: 60 }}>
                        <Button
                            title="点击"
                            onPress={() => {
                                const id = Portal.add(
                                    <View
                                        style={{
                                            height: w_height,
                                            backgroundColor:
                                                "rgba(0, 0, 0, 0.5)",
                                            justifyContent: "center",
                                            alignItems: "center"
                                        }}
                                        onTouchStart={()=>{
                                            Portal.remove(id);
                                        }}
                                    >
                                        <Text>弹出层</Text>
                                    </View>
                                );
                            }}
                        />
                    </View>
                </Portal.Host>
            </View>
        );
    }
}
export default App;