react-navigation 中无法找到 CardStackStyleInterpolator 的问题及解决方法

由于项目需要,在使用react-native进行app开发时,产品要求ios和android界面的页面跳转动画要统一。由于ios原生方法就是从右向左进行跳转,回退从左向右跳转。android原生的跳转方式与ios的不同,是从底部到顶部渐变渲染跳转的,回退是从顶部到地图渲染跳转。查看了好多相关文章,找到的方式如下:


import CardStackStyleInterpolator from 'react-navigation/src/views/CardStack/CardStackStyleInterpolator';
const  Router = StackNavigator({ // 注入各页面路由
    
    Home: { // 首页
        screen: Home,
        navigationOptions: {
            header: null, // 隐藏组件自带的顶部导航栏
        }
    },
    Login: { // 注册页
        screen: Login,
        navigationOptions: {
            header: null, // 隐藏组件自带的顶部导航栏
        }
    },

}, {
    initialRouteName:"Home", // 默认显示页面
    transitionConfig: () => ({ // 修改页面跳转动画方向
        screenInterpolator: CardStackStyleInterpolator.forHorizontal,
      }),
});

       以为按照文章中的步骤和代码,按部就班引入就可以了,但是在启动项目的时候,频频报CardStackStyleInterpolator这个方法集找不到,路径引用错误。然后就在node_modules的react-navigation文件夹中寻找,确实没有发现相关文件。在网上再次寻找该问题,可能是搜索的问题不对,花了2个多小时还是没有找到解决方案。
    最后,在github上,react-navigation的issues中搜索关键字,才找到问题的解决方法。这个是问题的地址:https://github.com/react-navigation/react-navigation/issues/3359

       注意:在该问题的帖子中,大神们原来都是引用StackViewStyleInterpolator这个方法集来代替CardStackStyleInterpolator的。这个方法集的路径也需要注意一下。在2.12.1版本之前, 该文件在react-navigation/src/views/StackView/中,在更高版本中,该文件已经移到了react-navigation-stack/dist/views/StackView/中。

猜你喜欢

转载自blog.csdn.net/rushichunqiu/article/details/82866890