如何在 iOS 和 Android 的 React Native 应用程序中检查互联网连接？

Question

我有一个 React Native 应用程序，我正在寻求添加功能，以检查应用程序首次启动时是否存在活动的 Internet 连接，并在此后不断地检查。

如果没有互联网连接，我正在寻求显示一条消息“未检测到互联网连接”，并带有“重试”按钮；如果有互联网连接，我正在寻求加载页面（WebView）。

我也在寻求同时支持 iOS 和 Android 设备；我对此进行了独立研究，并在 GitHub 上找到了几个库。但是，许多需要在 Android Manifest XML 中添加权限的额外步骤，但是我在我的应用程序中看不到 Android Manifest XML 文件；为什么只有 Android 需要清单？

任何帮助表示赞赏；谢谢并保重。

原文由 zstardust225 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

这里的答案有很多功劳，但这里有一个完整的例子， useNetInfo React Hook 在状态改变时触发， Alert 通知用户，并显示 View 给用户一些文本。

 import { useNetInfo, NetInfoState } from "@react-native-community/netinfo";
import {
  Alert,
  StyleSheet,
  Text,
  View,
} from "react-native";
...
const internetState: NetInfoState = useNetInfo();
...
useEffect(() => {
  if (internetState.isConnected === false) {
    Alert.alert(
      "No Internet! ❌",
      "Sorry, we need an Internet connection for MY_APP to run correctly.",
      [{ text: "Okay" }]
    );
  }
}, [internetState.isConnected]);
...
if (internetState.isConnected === false) {
  return (
    <View style={styles.centered}>
      <Text style={styles.title}>
        Please turn on the Internet to use MY_APP.
      </Text>
    </View>
  );
}
...
const styles = StyleSheet.create({
  centered: {
    alignItems: "center",
    flex: 1,
    justifyContent: "center",
  },
  title: {
    fontSize: 20,
    fontWeight: "bold",
    textAlign: "center",
  },
});

PS。我无法成功地将其包含在 App.tsx 或 navigation/index.tsx 以避免代码重复。下一次尝试，我在每个 screen 中都包含了逻辑。对于 App.tsx 或 navigation/index.tsx 情况，只要互联网恢复，用户就会被重定向到应用程序的起始 screen ，这不是我想要的。当互联网恢复时，我想回到用户结束的屏幕上。通过多个屏幕中的逻辑，多个 alerts 被触发:( 最后，我在 --- 中包含了 Alert App.tsx 逻辑，而 View 每个都没有互联网的信息 View screen . Alert 只弹出一次，但最好避免代码重复， --- 如果您知道如何从应用程序代码库的 1 个位置进行更新，请随时发布更新。非常感谢！

原文由 Daniel Danielecki 发布，翻译遵循 CC BY-SA 4.0 许可协议