react-navigation自定义StackNavigator页面跳转动画

使用StackNavigator跳转页面时,react-navigation根据平台的不同内置了相应的跳转动画。

经过参考网络上的方法发现react-navigation内置跳转动画的路径发生了改变,由
react-navigation/src/views/CardStackStyleInterpolator 改为
react-navigation/src/views/CardStack/CardStackStyleInterpolator

但是我都使用了上面的几个,发现还是报错,经过查看我的react-navigation源码(2.18.2)发现,路径又变了,而且名称也变了:import StackViewStyleInterpolator from 'react-navigation-stack/dist/views/StackView/StackViewStyleInterpolator.js'

react-navigation自定义StackNavigator页面跳转动画_第1张图片
StackViewStyleInterpolator.js的路径

其中StackViewStyleInterpolator.js

  1. forHorizontal:从右向左进入
  2. forVertical:从下向上进入
  3. forFadeFromBottomAndroid:从底部淡出
  4. forFade:无动画

具体使用:

import StackViewStyleInterpolator from 'react-navigation-stack/dist/views/StackView/StackViewStyleInterpolator.js'
/**
 * 导航器
 */
export const AppStackNavigator = createStackNavigator({
     initPage:InitPage,
},{
    initialRouteName: 'initPage',
    //去掉所有页面的Title
    navigationOptions: {
        header: null
    },
    transitionConfig:()=>({
        // 只要修改最后的forVertical就可以实现不同的动画了。
        screenInterpolator:StackViewStyleInterpolator. forVertical,
    })
});

你可能感兴趣的:(react-navigation自定义StackNavigator页面跳转动画)