React Navigationを使用してReact Nativeのカスタムとデフォルトの切り替えを切り替えることはできますか？以下

Question

が、私は任意の画面からカスタム移行を渡すことができるように、私が作成したトランジションの設定です：

const TransitionConfiguration =() => ({ 
     // Define scene interpolation, eq. custom transition 
    screenInterpolator: (sceneProps) => { 
    const { position, scene } = sceneProps; 
    const { index, route } = scene; 
    const params = route.params || {}; 
    const defaultTransition =() => ({}); 
    const transition = params.transition || defaultTransition; 

    return transition(index, position); 
    }, 
}); 

const navigationOptions = { 
    navigationOptions: { 
    headerStyle: { 
     backgroundColor: background.color4, 
     shadowColor: primary.color2, 
    }, 
    headerTitleStyle: { color: primary.color1 }, 
    }, 
    transitionConfig: TransitionConfiguration, 
}; 

あなたが観察できるとして、私は、ルートのparamとして、あるいはない移行を経過している場合は、私が確認してください。それが渡されなければ、空のオブジェクトを返すデフォルト関数を渡します。

移行設定を渡さないと、StackNavigatorのデフォルトの移行に戻すことはできますか？

Answer 1

あなたはTransitionConfigs.js

function getTransitionConfig(

    ... 
    ... 

    if (transitionConfigurer) { 
    return { 
     ...defaultConfig, 
     ...transitionConfigurer(), 
    }; 
    } 
    return defaultConfig; 

をチェックする場合は、カスタム移行コンフィギュレータを定義するとき、それはトランジションを定義するために使用されているtransitionSpec and screenInterpolator小道具を上書きすることがわかります。

この場合、screenInterpolatorを定義することで、これは唯一の移行となります。デフォルトのものを含めて多くを定義したい場合は、my post hereを参照し、デフォルトのものでカスタムのものを拡張してください。

意味すると、あなたのscreenInterpolatorは、params.transitionが定義されているかどうかを確認する必要があります。

Answer 2

したがって、反応ナビゲーションのコードに少し掘り下げた後、デフォルト遷移を実行する機能を提供するCardStackStyleInterpolatorというファイルがあることがわかりました。

私はちょうどそのファイルからエクスポートされたforHorizontal関数を使用しました。私はすべてのケースやデバイスのためにそれを処理していないが、私はそれが簡単に処理することができると思う。また、デフォルトのケースでコードを繰り返す必要もありません。以下は

は抜粋です：

import DefaultTransition from 'react-navigation/src/views/CardStack/CardStackStyleInterpolator'; 

const TransitionConfiguration =() => ({ 
     // Define scene interpolation, eq. custom transition 
    screenInterpolator: (sceneProps) => { 
    const { position, scene, layout } = sceneProps; 
    const { index, route } = scene; 
    const params = route.params || {}; 
    const transition = params.transition; 

    return transition && typeof transition === 'function' 
      ? transition(index, position, layout) 
      : DefaultTransition.forHorizontal(sceneProps); 
    }, 
});