React Navigation 5.x迁移指南

React Navigation是RN开发中一个比较常见的导航器，主要提供三种基本的导航样式。

StackNavigator：类似于普通的Navigator，屏幕上方导航栏；
TabNavigator：类似于iOS里面的TabBarController，屏幕下方的标签栏；
DrawerNavigator：抽屉样式，侧边滑出；

本文不具体介绍React Navigation 5.x的基本使用，本文主要讲如何将4.x迁移到5.x。

对比4.x，大部分API和4x都是一致的，当然5.x的变化还是蛮大的，并且语法也发送了一些变化，不过迁移的总体成本并是很大。首先，在5.x中对应的包名发生了变化，要完成4.x到5.x的迁移就需要将下面的包迁移到5x中去。

因此，将4.x迁移到5.x只需要对照上表，在package.json中依赖的4.x的包删除，然后重新安装对应右侧5.x的包即可。

Navigation 组件

在React Navigation 5.x 创建导航器的方式发生了变化，React Navigation 5.x 使用<NavigationContainer>代替4.x的<createAppContainer>，如下所示。

代码语言：txt复制

import { NavigationContainer } from '@react-navigation/native';

export default function App() {
  return <NavigationContainer>
     {/*...*/}
  </NavigationContainer>;
}

另外，5.x中<NavigationContainer>的onStateChangeAPI用来代替<createAppContainer>的onNavigationStateChange。同时，如果你的项目中需要用到多个NavigationContainer嵌套的情况，那么需要在被嵌套的<NavigationContainer>中设置independent={true}，如下所示。

代码语言：txt复制

<NavigationContainer
    independent={true}>

路由配置迁移

在React Navigation 4.x版本小红，我们通常使用createXNavigator() 函数来创建对已的导航器配置，而在5.x中则需要通过XX.Navigator XX.Screen 以组件的方式进行配置的。例如，React Navigation 4.x版本创建导航的代码如下。

代码语言：txt复制

const RootStack = createStackNavigator(
  {
    Home: {
      screen: HomeScreen,
      navigationOptions: { title: 'My app' },},
    Profile: {
      screen: ProfileScreen,
      params: { user: 'me' },},
  },
  {
    initialRouteName: 'Home',
    defaultNavigationOptions: {
      gestureEnabled: false,
    },
  }
);

不过，5.x版本Navigation的配置修改了写法，如下所示。

代码语言：txt复制

const Stack = createStackNavigator();

function RootStack() {
  return (
    <Stack.Navigator
      initialRouteName="Home"
      screenOptions={{ gestureEnabled: false }} >
      <Stack.Screen
        name="Home"
        component={HomeScreen}
        options={{ title: 'My app' }}/>
      <Stack.Screen
        name="Profile"
        component={ProfileScreen}
        initialParams={{ user: 'me' }}/>
    </Stack.Navigator>
  );
}

可以发现，5.x中所有的配置是通过props的方式传递个navigator的。同时，5.x使用<Screen>组件元素来表示一个页面，参数变化如下：

params 变成了initialParams；
navigationOptions 变成了options；
defaultNavigationOptions变成了screenOptions

navigation prop

相比navigation prop的4.x版本，navigation prop 5.x版本也发生了改变，例如，之前我们使用this.props.navigation.state.params来获取数据，现在要改成this.props.route.params方式来获取数据。

我将在下一篇文章介绍React Navigation 5.x的基本使用。

react 迁移 api

0 人点赞