Instagramのスタイルのパン/ズームは、私がイメージ使用してInstagramのに似て、ズーム/パンを実装する方法を探していますネイティブ

Question

を反応させるのネイティブリアクト：

または参照してください。https://www.youtube.com/watch?v=Ahzz3ik-EvQ

私は」たとえば、ViewTransformerのようなコンポーネントをFlatList内で試しましたが、アプリケーションコンポーネントツリーの上位に表示される要素（TabNavigationバーなど）は、ズームされた画像の上端の前景に残ります。

これはReact Nativeでどのように実装することができますか？

おかげ

UPDATE

Facebookのヨガは（レイアウトエンジンを反応する）の位置を可能にするために、親切に再オープン機能のリクエストがあります：固定支持します。このような特徴は、レンダリングエンジンに、親要素ではなく、スクリーンに対する要素の配置方法を容易に通知することを可能にする。これにより、position：fixedを持つコンポーネントは、ルートに対して相対的なzIndexを持つことができます。私はこのような特徴がこの問題を容易に解決すると信じています。

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

Answer 1

あなたは以下のように画像を入れて、maximumZoomScaleとminimumZoomScale値を設定ピンチズームを実現するためにscrollviewを使用することができます。 これは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>