美文网首页
react-navigation自定义StackNavigato

react-navigation自定义StackNavigato

作者: 咸鱼Jay | 来源:发表于2018-12-28 11:27 被阅读46次

    使用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'

    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自定义StackNavigato

          本文链接:https://www.haomeiwen.com/subject/pwlslqtx.html