如何在React-native中绘制其他应用程序

Question

我试图在我的本机应用程序中创建像聊天头一样的facebook Messenger。我使用pan响应器创建拖动效果并折叠到副作用但我无法弄清楚如何使聊天头可见其他应用程序或手机的主屏幕。我的应用程序已包含SYSTEM_ALERT_WINDOW权限。这是我的聊天头代码到目前为止。任何领导将不胜感激。

const width = Dimensions.get('window').width
const widthFactor = width / 375
const heightFactor = (Dimensions.get('window').height - 75) / 667

export default class App extends Component {
  constructor(props) {
    super(props)

    this.state = {
      showDraggable: true,
      dropZoneValues: null,
      pan: new Animated.ValueXY(),
    }

    this.panResponder = PanResponder.create({
      onStartShouldSetPanResponder: () => true,
      onPanResponderMove: Animated.event([
        null,
        {
          dx: this.state.pan.x,
          dy: this.state.pan.y,
        },
      ]),
      onPanResponderRelease: (e, gesture) => {
        if (this.isDropZone(gesture)) {
          this.setState({
            showDraggable: false,
          })
        } else {
          const k =
            gesture.dx > 0
              ? Window.width / 2 - CIRCLE_RADIUS
              : 0 - (Window.width / 2 - CIRCLE_RADIUS)
          if (gesture.moveY > Window.height - 2 * CIRCLE_RADIUS) {
            Animated.spring(this.state.pan, {
              toValue: { x: k, y: Window.height - 2 * CIRCLE_RADIUS },
            }).start()
          } else {
            const y = gesture.dy
            Animated.spring(this.state.pan, { toValue: { x: k, y } }).start()
          }
        }
      },
    })
  }

  isDropZone(gesture) {
    const dz = this.state.dropZoneValues
    return gesture.moveY > dz.y && gesture.moveY < dz.y + dz.height
  }

  renderDraggable() {
    if (this.state.showDraggable) {
      return (
        <View style={styles.draggableContainer}>
          <Animated.View
            {...this.panResponder.panHandlers}
            style={[this.state.pan.getLayout(), styles.circle]}
          >
            <Text style={styles.text}>Drag me!</Text>
          </Animated.View>
        </View>
      )
    }
  }

  setDropZoneValues(event) {
    this.setState({
      dropZoneValues: event.nativeEvent.layout,
    })
  }

  render() {
    that = this
    return (
      <View style={styles.mainContainer}>
        <View
          onLayout={this.setDropZoneValues.bind(this)}
          style={styles.dropZone}
        >
          <Text style={styles.text}>Drop me here!</Text>
        </View>
        {this.renderDraggable()}
      </View>
    )
  }
}