SVG缩放破坏了本机视图中的包装视图

Question

我在react-native中遇到可缩放SVG的问题。我有一个似乎没有任何限制的可拖动对象。我可以将组件拖动到整个屏幕上，即使它没有包装在同一视图下也是如此。 我不希望SVG对象越过灰色区域，如图所示： Picture

这是我的代码：（复制粘贴自

中的示例

  

react-native-svg-pan-zoom

带有添加的灰色标题）

return (

        <View style={{ flex: 1,
            backgroundColor: 'white',
            flexDirection: 'column',
            justifyContent: 'flex-start',
          }} onLayout={this.onLayout}
          >
          <View style={{ height: 100, width: null, backgroundColor: '#dcdcdc', flexDirection: 'row', 
          justifyContent: 'space-between' }}>
            <View style={{ flexDirection: 'row', justifyContent: 'flex-start' }}>


          </View>
          </View>
          <SvgPanZoom
      canvasHeight  = {500}
      canvasWidth   = {500}
      minScale      = {0.5}
      initialZoom   = {0.7}
      onZoom        = {(zoom) => { console.log('onZoom:' + zoom) }}
      canvasStyle   = {{ backgroundColor: 'yellow' }}
      viewStyle     = {{ backgroundColor: 'green'  }}
    >

      {/* Doesn't consume or respond to clicks */}
      <Circle
        cx          = {100}
        cy          = {100}
        r           = {42}
        stroke      = "red"
        strokeWidth = "2.5"
        fill        = "blue"
      />

      {/* Responds to clicks */}
      <SvgPanZoomElement
        x ={50}
        y ={50}
        onClick         = {()=>{ console.log('onClick!') }}
        onClickCanceled = {()=>{ console.log('onClickCanceled!') }}
        onClickRelease  = {()=>{ console.log('onClickRelease!') }}
        onDrag          = {()=>{ console.log('onDrag!') }}
      >
        <Circle
          cx          = {42}
          cy          = {42}
          r           = {42}
          stroke      = "blue"
          strokeWidth = "2.5"
          fill        = "red"
        />
      </SvgPanZoomElement>

    </SvgPanZoom>

        </View>


      );
    }