在 React Native 中仅缩放 ScrollView 内的某些元素

Question

我正在尝试在 React Native 中实现一个带有缩放功能的裁剪工具。裁剪效果很好，但当我的叠加层位于图像之上时，我无法缩放图像。

代码：

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

如果 Overlay 在 Scrollview 内部，则 Overlay 和图像都会放大。如果 Overlay 在 ScrollView 外部，那么当然图像不会缩放。

Here is what my app looks like

关于如何只放大图像而不影响叠加层，有什么想法吗？

Answer 1

如果想让ScrollView处理触摸事件，可以把overlay放到ScrollView外面，用position: relative或者position: absolute定位到ScrollView上面，给overlay root 查看 "none" 的 pointerEvents 道具。

这样叠加层就不会捕获触摸。

在 React Native 中仅缩放 ScrollView 内的某些元素

Only zoom certain elements inside of ScrollView in React Native

scrollview

react-native