React Native之升级React Navigation v3-v4

yz_
2,341 阅读3分钟

前言

前面一直使用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版本中，新增了如下的原生库

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

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

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

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

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

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

官方教程:

reactnavigation.org/docs/en/get…

reactnavigation.org/docs/en/sta…

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属性发生变化

原名称 原位置 现名称 现位置 用法
headerLayoutPreset createStackNavigator的第二个参数的根节点 headerTitleAlign createStackNavigator的第二个参数的defaultNavigationOptions属性的根节点 设置标题的对齐方式，android默认左对齐，ios默认居中对齐
header:null createStackNavigator的第二个参数的defaultNavigationOptions属性的根节点 headerShown:false createStackNavigator的第二个参数的defaultNavigationOptions属性的根节点 隐藏header
gesturesEnabled createStackNavigator的第二个参数的defaultNavigationOptions属性的根节点 gestureEnabled createStackNavigator的第二个参数的defaultNavigationOptions属性的根节点 设置右滑返回手势
transitionConfig createStackNavigator的第二个参数的defaultNavigationOptions属性的根节点 已移除,可以根据#2.2进行设置 无 设置页面的跳转动画

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

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

v3:

headerLeft: leftView,

v4:

headerLeft: ()=>leftView,

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

github.com/react-navig…

github.com/react-navig…

avatar
文章
阅读
粉丝