Zoom nur bestimmte Elemente innerhalb von ScrollView in React Native

Question

Ich versuche ein Zuschneiden Werkzeug mit Pinch Zoom in React Native zu implementieren. Das Zuschneiden funktioniert einwandfrei, aber ich habe Probleme, das Bild zu zoomen, während sich mein Overlay oben befindet.

Code:.

 <ScrollView 
    maximumZoomScale={2} 
    minimumZoomScale={1} 
    scrollEnabled={false} 
    bouncesZoom={false}> 

     <Animated.View 
     style={this.getStyles()} 
     {...this._panResponder.panHandlers}> 
      <View> 
       <Image style={[{height: getCropContainerHeight(), 
       width: this.getCropContainerWidth()}]} 
       source={{uri: this.props.image}} /> 
      </View> 
     </Animated.View> 

     <Overlay movement={{...this._panResponder.panHandlers}} /> 

    </ScrollView> 

Wenn die Overlay innerhalb des Scroll sind, dann sowohl die Überlagerung und in dem Bild hineingezoomt, wenn der Overlay außerhalb des Scrollview ist dann natürlich der Bildzoom nicht.

Here is what my app looks like

Irgendwelche Gedanken darüber, wie ich nur auf dem Bild vergrößern können, ohne das Overlay zu beeinflussen?

Answer 1

Wenn Sie die Scroll wollen die Touch-Ereignisse zu behandeln, können Sie die Überlagerung außerhalb des Scroll, positionieren Sie es auf dem Scrollview mit position: relative oder position: absolute, und geben die Overlay-Wurzel eine pointerEvents Stütze der "none" anzuzeigen.

Auf diese Weise wird das Overlay die Berührungen nicht erfassen.