リアクションネイティブ、ナビゲーションエクスペリエンスアニメーション

Question

リアクションネイティブナビゲーション実験サポートは、下からスライド、左からスライド、フェードエフェクトなど？はいの場合はどうすればいいのですか？助けてください。

Answer 1

あなたがNavigationTransitionerのrenderSceneを使用して、シーンをレンダリングするとき、あなたはlayout、position、sceneとprogressが含まれているpropsオブジェクトを取得します。カスタム補間関数でそれらを使用して、好きなアニメーションを作成することができます。

現時点では、反応したネイティブは、すぐにright-to-leftとbottom-to-upのアニメーションしか持たないようです。 NavigationCardStackStyleInterpolator：forHorizontalとforVerticalで使用できます。

詳細はNavigationCardStackStyleInterpolator.jsを参照してください。

あなたのコードがどのように見える場合：これは、左から右からボトムまでアップへの移行を変更します

<NavigationCard 
    {...props} 
    style={NavigationCardStackStyleInterpolator.forVertical(props)} 
    renderScene={this._renderScene} 
    key={props.scene.navigationState.key} 
/> 

：RN-NavigationExperimental-Redux-Example

あなたは次のようにNavigationCardのstyleプロパティを定義することができます。

Answer 2

左から右に上から下のアニメーションが必要な場合は、独自のカスタムインターポレータを作成します。 NavigationCardStackStyleInterpolatorコンポーネントをテンプレートとして使用して、必要な変更を加えることができます。例えば。上から湖底のアニメーションを実装するには次のリンクを参照してください。

React Navtive NavigationCardStackStyleInterpolator.forVertical() - How can I change the direction?

Answer 3

ただNavigationCardStackにcardStyleInterpolatorプロパティwas addedに注意したいです。すぐに（RN 0.41以上で）カードスタックを書き直すことなくカスタムアニメーションを使用することが可能になります。