react-navigation5.x 的变化很大
文档地址:reactnavigation

安装react-navigation

安装和配置大多数导航器使用的依赖项

npm install react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view

安装所需要的模块
stack navigator library
bottom-tabs navigator library

npm install @react-navigation/native
npm install @react-navigation/stack 
npm install @react-navigation/bottom-tabs

从React Native 0.60及更高版本开始，链接是自动的。因此，无需手动执行 react-native link。

ios设置

npx pod-install ios

注意react-navigation5.x 移除了createAppContainer 使用以下方式创建路由

import React from 'react';
import { createStackNavigator } from '@react-navigation/stack';
import { NavigationContainer } from '@react-navigation/native';
import 'react-native-gesture-handler';

import Home from '../Home'
import TabNavigation from './TabNavigation';
const Stack = createStackNavigator();
function MyStack() {
    return (
        <NavigationContainer>
            <Stack.Navigator initialRouteName='TabNavigation'>
                <Stack.Screen name="TabNavigation" component={TabNavigation} />
                <Stack.Screen name="Home" component={Home} />
            </Stack.Navigator>
        </NavigationContainer>
    );
}

export default MyStack;

TabNavigation.js

import React from 'react';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';

import Home from '../Home'
import Me from '../Me'
import Message from '../Message'
const Tab = createBottomTabNavigator();
function MyTabs() {
    return (
        <Tab.Navigator
         tabBarOptions={{
            activeTintColor: 'red',
            inactiveTintColor: 'black',
            showIcon: true,
            style: {
                backgroundColor: '#fff'
            },
            indicatorStyle: {
                opacity: 0
            },
            tabStyle: {
                padding: 0
            }
        }}>
            <Tab.Screen name="Home" component={Home} />
            <Tab.Screen name="Message" component={Message} />
            <Tab.Screen name="Me" component={Me} />
        </Tab.Navigator>
    );
}
export default MyTabs;

自定义过度动画

CardStyleInterpolators

• forHorizontalIOS -从右侧插入标准iOS样式的幻灯片。
• forVerticalIOS -从底部插入标准iOS样式的幻灯片（用于模式）。
• forModalPresentationIOS -iOS 13中的标准iOS样式模态动画。
• forFadeFromBottomAndroid -Android Oreo的标准Android风格从底部逐渐淡入。
• forRevealFromBottomAndroid -Android Pie从底部显示标准的Android风格。

  <Stack.Navigator
    initialRouteName="TabNavigation"
    screenOptions={{
      cardStyleInterpolator: CardStyleInterpolators.forHorizontalIOS, //统一从右侧插入。
    }}>
    <Stack.Screen name="TabNavigation" component={TabNavigation} />
    ...
  </Stack.Navigator>      

更多：reactnavigation