Instagram风格的平移/缩放与React Native

Question

我正在寻找一种使用React Native实现类似于Instagram的图像平移/缩放的方法：

或参见：https://www.youtube.com/watch?v=Ahzz3ik-EvQ

我在FlatList中尝试了ViewTransformer之类的组件，但是在应用程序组件树上方出现的元素（例如TabNavigation栏）仍保留在缩放图像顶部的前景中。

是否有人知道或有任何关于如何使用React Native实现此功能的提示？

由于

更新

Facebook瑜伽（Reacts布局引擎）已经重新打开了一个功能请求，允许位置：固定支持。这样的特征将使得易于通知渲染引擎如何相对于屏幕而不是父组件定位元素。这将允许具有position：fixed的组件具有相对于根的zIndex。我相信这样的功能很容易解决这个问题。

https://github.com/facebook/yoga/issues/264

Answer 1

您可以使用scrollview实现捏拉缩放，只需将图像设置如下，并设置maximumZoomScale和minimumZoomScale值。 它只适用于ios。

<ScrollView maximumZoomScale={5} scrollEnabled={true} minimumZoomScale={1} showsHorizontalScrollIndicator={false} showsVerticalScrollIndicator={false}>
 <Image
  style={{height:100, width: 300}}
  source={{ uri: "https://img0.gaadicdn.com/images/car-
          images/496x206/Lamborghini/Lamborghini-Huracan/Lamborghini-
          Huracan-Performante/047.jpg" 
        }}
  />
</ScrollView>