1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
| 在 React Native 中，导航与组件的生命周期紧密相关。
React Navigation 通过控制组件的生命周期来管理页面的导航和状态。
1. 导航生命周期处理：
1.1 页面的加载与卸载：
ReactNavigation会在页面进入时自动触发组件的componentDidMount和componentWillUnmount等生命周期方法。 通过这些方法，开发者可以在页面加载时执行必要的初始化操作（如数据获取）
，并在页面卸载时清理资源（如取消网络请求）。
1.2 导航回调：
React Navigation 提供了 navigation.addListener 方法，可以监听页面的焦点变化（如页面的进入和离开）。
例如，当页面重新进入时，可以通过监听 focus 事件来触发某些操作。
2. 数据传递：
2.1 通过 params 传递数据：
可以在导航时通过 navigation.navigate 或 navigation.push 等方法传递参数（params）给目标页面。
例如：
navigation.navigate('Details', { itemId: 86 });
2.2 在目标页面中，通过 route.params 获取传递的数据：
const { itemId } = route.params;
3. 状态保存：
3.1 React Navigation 自动保存状态：
React Navigation 会自动保存导航状态，例如历史记录、页面顺序等。
这意味着当你返回到某个页面时，React Navigation 会恢复页面的上次状态。
3.2 持久化状态：
可以结合 useEffect 和 useState 来手动保存和恢复页面的状态。
例如，使用 AsyncStorage 或其他持久化方案来保存用户数据、输入内容等，确保在页面重新加载时恢复状态。
3.3 Screen 组件的 unmountOnBlur 属性：
通过设置 unmountOnBlur 为 true，可以在页面离开时卸载该页面，减少内存占用，避免页面状态过多占用资源。
总结：
-导航生命周期：通过事件监听（focus、blur）和生命周期方法（如 componentDidMount、componentWillUnmount）管理页面的加载与卸载。
-数据传递：通过 navigation.navigate 和 route.params 实现页面间的数据传递。
-状态保存：React Navigation 自动保存导航状态，开发者可通过持久化方案手动保存页面状态，确保应用数据不丢失。
|