Specify the screen transition method in React Navigation StackNavigator

question

When using StackNavigator in React Navigation, the transition mode of the new screen is specified by the parameter StackNavigatorConfig.mode of StackNavigator . By default, the value of this parameter is cardslide out from bottom to top on Android phones, and slide out from right to left on Apple phones. Another option is available modal, but this option is only available for Apple phones, which behaves as a bottom-up slide out of the screen.

The above two options, whether they are used cardor not, modalcan not achieve the consistent effect we expect on two platforms:

• Non-modal screen slides out from right to left
• Modal screen slides out from bottom to top

ideas

To achieve this effect, simply using the above options to define how all the screens appear will not solve the problem, now we must be able to specify how a certain screen transitions. As of now, the latest version of React Navigation is 1.5.11, but from its official documentation, there isn't a convenient way to do this. There is another, more complicated way to do this: transitionConfigin combination with the built-in jump animations.

Code

The built-in jump animation of React Navigation is in react-navigation/src/views/CardStack/CardStackStyleInterpolator, there are three kinds:

• forHorizontal : Enter from right to left (the same behavior for android/apple)
• forVertical : Enter from bottom to top (android/Apple behavior is consistent)
• forFadeFromBottomAndroid : Fade from bottom

It can be seen from the above that by comprehensively using forHorizontal, forVerticaland properly configuring the transition mode that can specify a specific screen, we can achieve the consistent effect of the dual platforms mentioned above.

Custom transitionConfigSupport to specify the appearance of a single screen

Now we can StackNavigatorcustomize one transitionConfigto support different transitions that can be specified for a screen:

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

const TransitionConfiguration = () => ({
    screenInterpolator: (sceneProps) => {
        const {scene} = sceneProps;
        const {route} = scene;
        // 获取屏幕切换时新屏幕的参数
        const params = route.params || {};
        // 看看参数中是否有 transition 参数，有则使用，否则使用缺省值 forHorizontal
        // forHorizontal 表示从右向左滑出
        const transition = params.transition || 'forHorizontal';
        return CardStackStyleInterpolator[transition](sceneProps);
    },
});

const StackScreens = StackNavigator({
     //... 路由屏幕定义;
},
{
     transitionConfig: TransitionConfiguration,
     navigationOptions: {
          //... 省略
     },
});

Transition to a specific screen using a specified method

Now let's see how to use it. Suppose we StackNavigator StackScreenswant to jump to the login screen in one of the screens, and we want the login screen to pop up from the bottom up, we can do this:

this.props.navigation.navigate('LoginScreen', {transition: 'forVertical'});

References

react-navigation Custom StackNavigator page jump animation
React Native Navigation, custom Scene (Screen) Transitions and interpolations
React Navigation: An Overview of Transitioner and CardStack