前言

前面一直使用React Navigation的v3版本，目前打算升级版本到v4，Api变动比较大，特此记录下(为了方便，下面RNN简写表示React Navigation)

本文不涉及到具体的集成过程，因为官方的教程已经非常详细了，只是列出v3升级到v4的差异点

ps：由于RNN中的原生依赖库涉及到androidX，建议将React Native升级到0.60以上才升级

过程

1.引用的原生库多了

在v3版本中,RNN之中依赖的原生库只有react-native-gesture-handler,在v4版本中，新增了如下的原生库

react-native-reanimated
react-native-screens

注意该库需要android原生android/app/build.gradle添加:


implementation 'androidx.appcompat:appcompat:1.1.0-rc01'

implementation 'androidx.swiperefreshlayout:swiperefreshlayout:1.1.0-alpha02'

react-native-safe-area-context

虽然看起来变得很繁琐，其实集成这些库绝对是一个好事,特别是react-native-gesture-handler和react-native-reanimated,目前和将来，很多RN的高性能组件很大可能均会依赖其一或者全部

除了这上面4个原生库之外，在v4版本中官方将所有的navigator全部拆分出来了

stack: https://github.com/react-navigation/stack
tabs: https://github.com/react-navigation/tabs
drawer: https://github.com/react-navigation/drawer

stackNavigator一般情况下，必会使用，该库也有一个原生依赖

@react-native-community/masked-view

小结: 升级到v4版本，除了react-native-gesture-handler在v3版本已经存在，还需要新增4个原生依赖库，另外需要引用react-navigation-stack

官方教程:

https://reactnavigation.org/docs/en/getting-started.html

https://reactnavigation.org/docs/en/stack-navigator.html

2.api变化

改变原生库后，直接运行，会报错，有下面几处api需要变更

2.1 createStackNavigator变为从react-navigation-stack中引用

v3:


import {

    createStackNavigator,

    Header,

} from 'react-navigation';

v4:


import {CardStyleInterpolators, createStackNavigator, Header} from 'react-navigation-stack';

2.2 Interpolators引入变化和使用变化

如果有需要改变页面跳转的动画效果，需要引入Interpolators，v3的引入方式

v3:


import StackViewStyleInterpolator from 'react-navigation-stack/lib/module/views/StackView/StackViewStyleInterpolator';

v4: 位置和名称(StackViewStyleInterpolator -> CardStyleInterpolators)均变化了


import {CardStyleInterpolators, createStackNavigator, Header} from 'react-navigation-stack';

用法也变化了:

v3: 根据routeName可以自定义每个页面的跳转动画


const AppNavigation = createStackNavigator(

    ,

    {

        transitionConfig: () => ({

            screenInterpolator: props => {

                const last = props.scenes[props.scenes.length - 1];

                // Transitioning from search screen (goBack)

                if (['YZVideoPlayerPage','HomeSearch'].indexOf(last.route.routeName)>=0) {

                    return StackViewStyleInterpolator.forFadeFromBottomAndroid(props);

                }

                return StackViewStyleInterpolator.forHorizontal(props);

            },

        }),

    }

)

v4: 直接可以配置每个页面navigationOptions的cardStyleInterpolator


ProfileSetting: {

            screen: ProfileSetting,

            navigationOptions: {headerTitle: '设置', cardStyleInterpolator:(props)=> CardStyleInterpolators.forHorizontalIOS(props)},

        },

当然依旧可以设置全局的，譬如设置android/ios的跳转动画一致:


const AppNavigation = createStackNavigator(

    ,

    {

        defaultNavigationOptions: () => ({

            cardStyleInterpolator: (props)=> CardStyleInterpolators.forHorizontalIOS(props)

        }),

    }

)

2.3 部分header属性发生变化

|原名称|原位置|现名称|现位置|用法|

|-- |-- |-- |-- |-- |

另外cardShadowEnabled、cardOverlayEnabled、cardStyle、headerBackTitleVisible、onTransitionStart onTransitionEnd,全部从createStackNavigator的第二个参数的根节点移动的到createStackNavigator的第二个参数的defaultNavigationOptions属性的根节点

headerTitle、headerLeft、headerRight、headerBackground、backImage全部从Element改为()=>Element,譬如

v3:


headerLeft: leftView,

v4:


headerLeft: ()=>leftView,

小结: 上面列出了大部分的变更，具体所有的变更，可以查看

https://github.com/react-navigation/stack/blob/master/src/utils/validateDeprecatedConfig.tsx

https://github.com/react-navigation/stack/blob/master/src/utils/validateDeprecatedOptions.tsx

React Native之升级React Navigation v3-v4

前言

过程