两个mapbox gl native的圆形剪辑路径？

Question

是否可以以这种方式显示两个原生地图框，一个是另一个内圆，所有移动/缩放事件都传播到两个？

对于JS版本，我可以使用：https://www.mapbox.com/mapbox-gl-js/example/mapbox-gl-compare/

然后像这样设置剪辑路径：

   this.map1.nativeElement.getElementsByTagName('canvas')[0].style['clip-path'] = 'circle(' + pixelDistance + 'px at center)';

   this.map1.nativeElement.getElementsByTagName('canvas')[0].style['position'] = 'initial';

给出这样的东西：

现在，我说要像这样使用React Native：

return (
  <View style={styles.container}>
    <MapView
      ref={map => { this._map = map }}
      style={styles.map}
      initialZoomLevel={this.state.zoom}
      initialCenterCoordinate={this.state.center}
      initialDirection={0}
      rotateEnabled={true}
      scrollEnabled={true}
      zoomEnabled={true}
      styleURL={Config.MAPBOX_MAP_1}
      zIndex={2}
    />
    <MapView
      ref={map => { this._map = map }}
      style={styles.map}
      initialZoomLevel={this.state.zoom}
      initialCenterCoordinate={this.state.center}
      initialDirection={0}
      rotateEnabled={true}
      scrollEnabled={true}
      zoomEnabled={true}
      styleURL={Config.MAPBOX_MAP_2}
      zIndex={1}
    />
</View>)

靠https://github.com/mapbox/react-native-mapbox-gl

我如何重现类似行为？