React Navigation 5.x迁移指南：从4.x升级到新版本

React Navigation是React Native开发中常用的导航库，主要提供三种基本的导航样式：StackNavigator（屏幕上方导航栏）、TabNavigator（屏幕下方标签栏）和DrawerNavigator（侧边抽屉样式）。本文不具体介绍React Navigation 5.x的基本使用，而是专注于如何从4.x版本迁移到5.x版本。

对比4.x，5.x的大部分API保持一致，但变化较大，语法也有所调整，不过总体迁移成本并不高。首先，5.x中的包名发生了变化，你需要更新package.json文件，将4.x的依赖包替换为5.x的对应包。

Navigation 组件

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

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

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

此外，5.x中<NavigationContainer>的onStateChangeAPI代替了<createAppContainer>的onNavigationStateChange。如果你的项目需要多个NavigationContainer嵌套，需在被嵌套的组件中设置independent={true}：

<NavigationContainer independent={true}>
  {/*...*/}
</NavigationContainer>

路由配置迁移

在React Navigation 4.x中，通常使用createXNavigator()函数来配置导航器，而5.x则通过XX.Navigator和XX.Screen组件方式进行配置。例如，4.x版本的代码：

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

在5.x中，配置写法修改为：

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组件。<Screen>组件表示一个页面，参数变化包括：params变为initialParams，navigationOptions变为options，defaultNavigationOptions变为screenOptions。

navigation prop

navigation prop在5.x版本中也发生了变化。例如，之前使用this.props.navigation.state.params获取数据，现在应改为this.props.route.params方式。