React Navigation：Android用StackNavigatorへの移行

Question

私はこのライブラリhttps://reactnavigation.org/docs/intro/を使用して、反応ネイティブでアンドロイドを構築しています。アンドロイドデバイスでナビゲーションを行うことができますが、画面を右からスライドさせて左からフェードインさせる方法はありますか。この動作はiOS端末では発生しますが、Androidでは発生しないようです。アンドロイドアプリのアニメーション設定はありますか？

以下の動画をご覧ください。これはiOSに記録されています。

Answer 1

より良いあなたはインクルードは、このためのネイティブnavigationを反応させることができます。あなたはconfigureSceneメソッドを使って画面を構成できます。その方法の中で、アニメーション画面のためにNavigator.SceneConfigsを使用してください。 AndroidとiOSの両方の作業です。

Answer 2

on this pageと書かれているように、デフォルトの画面遷移を上書きするには、transitionConfigを使用する必要があります。

残念ながら、そこには例がその関数がどのように機能するか提供されていないが、あなたは、このファイルにいくつかの例を見つけることができます：\react-navigation\lib\views\CardStackStyleInterpolator.js

だからあなたのコードは次のようになります。

const navigator = StackNavigator(scenes, { 
    transitionConfig:() => ({ 
     screenInterpolator: sceneProps => { 
      const { layout, position, scene } = sceneProps; 
      const { index } = scene; 

      const translateX = position.interpolate({ 
       inputRange: [index - 1, index, index + 1], 
       outputRange: [layout.initWidth, 0, 0] 
      }); 

      const opacity = position.interpolate({ 
       inputRange: [index - 1, index - 0.99, index, index + 0.99, index + 1], 
       outputRange: [0, 1, 1, 0.3, 0] 
      }); 

      return { opacity, transform: [{ translateX }] } 
     } 
    }) 
}); 

Answer 3

あなたがから有用な情報を得ることができますindex.d.tsファイルを見つけてexport interface TransitionConfigを見つけたら、 'Ctrl' & left_clickをNavigationTransitionSpecとNavigationSceneRendererPropsと押すと、必要なものすべてを手に入れることができます。