在 React Native 应用中，网络连接状态的监听和处理是非常重要的一项任务。@react-native-community/netinfo 包提供了一种简单而有效的方式，可以轻松地在应用中监听网络连接状态的变化，并应对这些变化。
安装
使用 npm 或 yarn 进行安装：
npm install @react-native-community/netinfo --save
或：
yarn add @react-native-community/netinfo
使用
导入模块
import NetInfo from "@react-native-community/netinfo";
获取网络连接状态
通过调用 NetInfo.fetch 方法可以获取当前的网络连接状态：
NetInfo.fetch().then((state) => {
console.log("Connection type", state.type);
console.log("Is connected?", state.isConnected);
});返回的 state 对象中包含以下属性：
- type：表示当前网络连接的类型，可以是以下值之一：'none'（没有连接），'wifi'（Wi-Fi 连接），'cellular'（蜂窝数据连接），'unknown'（未知类型连接）。
- isConnected：表示当前是否已连接到互联网。
监听网络连接状态变化
通过调用 NetInfo.addEventListener 方法可以监听网络连接状态的变化：
NetInfo.addEventListener((state) => {
console.log("Connection type", state.type);
console.log("Is connected?", state.isConnected);
});其中，state 对象包含了与上述 fetch 方法中返回的一样的属性。
取消网络连接状态监听
如果不需要继续监听网络连接状态，可以通过调用 NetInfo.removeEventListener 方法来停止监听：
NetInfo.removeEventListener((state) => {
console.log("Connection type", state.type);
console.log("Is connected?", state.isConnected);
});示例代码
以下是一个简单的 React Native 例子，演示了如何使用 @react-native-community/netinfo 包来监听网络连接状态：
-- -------------------- ---- -------
------ ------ - --------- --------- - ---- --------
------ - ----- ---- - ---- ---------------
------ ------- ---- ----------------------------------
----- --- - -- -- -
----- ---------------- ------------------ - --------------------
----- ------------- --------------- - ----------------
------------ -- -
----- ----------- - -------------------------------- -- -
------------------------------
----------------------------------
---
------ -- -- -
--------------
--
-- ----
------ -
------
---------------- ----- -----------------------
-------- ---------- ------------ - ----- - ------------
-------
--
--
------ ------- ----总结
@react-native-community/netinfo 包提供了一种简单而有效的方式，可以轻松地在 React Native 应用中监听网络连接状态的变化。本文详细介绍了如何安装以及使用该包，同时提供了一个示例代码，希望读者可以从中学到有价值的知识和经验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedaf1bb5cbfe1ea0610f91