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 (
);
}
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 (
);
}
export default MyTabs;
自定义过度动画
CardStyleInterpolators
-
forHorizontalIOS-从右侧插入标准iOS样式的幻灯片。 -
forVerticalIOS-从底部插入标准iOS样式的幻灯片（用于模式）。 -
forModalPresentationIOS-iOS 13中的标准iOS样式模态动画。 -
forFadeFromBottomAndroid-Android Oreo的标准Android风格从底部逐渐淡入。 -
forRevealFromBottomAndroid-Android Pie从底部显示标准的Android风格。
更多：reactnavigation