1.安装依赖
npm install @react-navigation/native
npm install @react-navigation/stack
npm install @react-navigation/bottom-tabs
npm install @react-navigation/material-top-tabs react-native-tab-view
npm install react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view
2.配置
在android/app/build.gradle dependencies 对象里面
implementation 'androidx.appcompat:appcompat:1.1.0-rc01'
implementation 'androidx.swiperefreshlayout:swiperefreshlayout:1.1.0-alpha02'
3.堆栈导航
1.导入
import {NavigationContainer} from '@react-navigation/native';
// 导航容器
import {createStackNavigator} from '@react-navigation/stack';
// 导入创建堆栈导航方法
2. 创建 堆栈导航
const Stack = createStackNavigator();
3.创建导航需要的界面
<NavigationContainer>
<Stack.Navigator>
<Stack.Screen
name="Home"
component={Home}
/>
<Stack.Screen
name="Details"
component={Details}
/>
</Stack.Navigator>
</NavigationContainer>
4.包装导航
NavigationContainer 导航容器
Stack.Navigator 堆栈导航
Stack.Screen 堆栈导航页面
5.页面的跳转
this.props.navigation
push 推入堆栈
replace 替换当前页面
goBack() 返回
popToTop() 回到顶层
6.参数的处理
navigation.push(“Details”,{id:"abc"}) //传递参数
this.props.route.params.id //获取参数
<Stack.Screen initialParams={{id:1}}> //配置初始化参数