React Navigation
# 安装
基础依赖：
npm install @react-navigation/native
1
安装 RN 依赖：
npm install react-native-screens react-native-safe-area-context
1
Stack：
npm install @react-navigation/native-stack
1
Tab：
npm install @react-navigation/bottom-tabs
1
# 基础使用
# 常见API
| API | 用途 |
|---|---|
| navigate | 跳转 |
| goBack | 返回 |
| replace | 替换当前页面 |
| reset | 重置导航 |
| push | 新增页面 |
| pop | 返回 |
| setParams | 修改参数 |
| setOptions | 修改标题 |
| useNavigation | 获取导航 |
| useRoute | 获取参数 |
| useFocusEffect | 页面生命周期 |
# useNavigation
获取导航
如果组件不是 Screen，可以这样使用
import {
useNavigation
}
from "@react-navigation/native";
const navigation =useNavigation();
navigation.navigate("Detail")
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
# useFocusEffect
页面生命周期
import {
useFocusEffect
}
from "@react-navigation/native";
useFocusEffect(
React.useCallback(()=>{
console.log( "页面显示" )
return ()=>{ console.log( "离开页面" ) }
},[])
)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
上次更新: 2026/07/26, 06:36:59