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>

如果叠加层位于Scrollview内部，则叠加层和图像都会放大。如果叠加层位于ScrollView之外，那么当然图像不会缩放。

Here is what my app looks like

有关如何在不影响叠加效果的情况下放大图像的任何想法？

Answer 1

如果您希望ScrollView处理触摸事件，您可以将叠加层置于ScrollView之外，使用position: relative或position: absolute将其置于ScrollView的顶部，并提供叠加根视图"none"的{{3}}道具int (*p) [4];。

这样，叠加层就不会捕捉到触摸。

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

1 个答案: