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

是否可以以这样的方式显示两个本机贴图框，一个是另一个内圆，并且所有移动/缩放事件都会传播到这两个内圆

对于JS版本，我可以使用：

然后设置剪辑路径，如下所示：

   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>)

返回(
{this._map=map}}
style={style.map}
initialZoomLevel={this.state.zoom}
initialCenterCoordinate={this.state.center}
initialDirection={0}
rotateEnabled={true}
scrollEnabled={true}
zoomEnabled={true}
styleURL={Config.MAPBOX\u MAP\u 1}
zIndex={2}
/>
{this._map=map}}
style={style.map}
initialZoomLevel={this.state.zoom}
initialCenterCoordinate={this.state.center}
initialDirection={0}
rotateEnabled={true}
scrollEnabled={true}
zoomEnabled={true}
styleURL={Config.MAPBOX\u MAP\u 2}
zIndex={1}
/>
)

依靠

我将如何重现类似的行为