import React, { Component } from "react";
import { Text, View, Button, Dimensions } from "react-native";
const ThemeContext = React.createContext({
  add: () => {}
});
class Portal extends Component {
  render() {
    return (
      <ThemeContext.Consumer>
        {({add}) => {
          setTimeout(()=>{
            add(this.props.children)
          },0)  
        }}
      </ThemeContext.Consumer>
    );
  }
}
let triggerChange = () => {}
class Layer extends Component {
  state = {
    node: null,
    nub: 0
  }
  componentWillMount() {
    triggerChange = (node) => {
      this.setState({
        node
      })
    }
  }
  render() {
    return (<View style={{height: Dimensions.get("window").height - 100, backgroundColor: 'red', justifyContent: 'center', alignItems: 'center'}}>
      {this.state.node}
    </View>)
  }
}
class App extends Component {
  state = {
    node: null,
    nub: 0
  }
  add = (node) => {
    triggerChange(node)
  }
  addNub = () => {
    this.setState({
      nub: this.state.nub+1
    })
  }
  render() {
    return (
      <ThemeContext.Provider value={{add: this.add}}>
        <View style={{height: 100, backgroundColor: 'yellow'}}>
          <Text style={{textAlign: 'center'}}>本来该出现的位置</Text>
          <Portal>
            <Text>{this.state.nub}</Text>
            <View style={{height: 200, width: 200, backgroundColor: 'blue'}}>
              <Text>蒙层</Text>
            </View>
            <Button onPress={this.addNub} title='CLICK' ></Button>
          </Portal>
        </View>
        <Layer></Layer>
      </ThemeContext.Provider>
    );
  }
}

export default App;