React Native 之 AppState（应用状态）（二十二）

AppState 是 React Native 提供的一个 API，用于监听应用在前台、后台或未激活状态之间的切换。这对于管理应用的资源、调解应用的界面显示或响应系统变乱（如来电）等场景非常有用。
  AppState 模块通过监听系统广播的意图（Intents）或应用生命周期变乱来实现其功能。当应用的状态发生变革时（比方，用户切换到另一个应用或返回到主屏幕），系统会发送一个相应的意图或变乱。AppState 模块捕获这些变乱，并通过其提供的 API 将状态变革关照给应用。

1. import React, { useEffect } from 'react';  
2. import { AppState, Text, View, StyleSheet } from 'react-native';  
3.   
4. const AppStateExample = () => {  
5.   const handleAppStateChange = (nextAppState) => {  
6.     if (nextAppState === 'active') {  
7.       console.log('App has come to the foreground!');  
8.     } else if (nextAppState === 'background') {  
9.       console.log('App has gone to the background!');  
10.     } else if (nextAppState === 'inactive') {  
11.       console.log('App is in an inactive state!');  
12.     }  
13.   };  
14.   
15.   useEffect(() => {  
16.     const subscription = AppState.addEventListener('change', handleAppStateChange);  
17.   
18.     // 清理函数，确保在组件卸载时移除监听器  
19.     return () => {  
20.       subscription.remove();  
21.     };  
22.   }, []); // 空依赖数组确保 effect 只在组件挂载和卸载时运行  
23.   
24.   return (  
25.     <View style={styles.container}>  
26.       <Text>Open the app switcher (double tap home button) and check the console to see the logs.</Text>  
27.     </View>  
28.   );  
29. };  
30.   
31. const styles = StyleSheet.create({  
32.   container: {  
33.     flex: 1,  
34.     justifyContent: 'center',  
35.     alignItems: 'center',  
36.   },  
37. });  
38.   
39. export default AppStateExample;

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。