React Native 网络信息库（React Native NetInfo）教程

React Native 网络信息库（React Native NetInfo）教程

react-native-netinfoReact Native Network Info API for Android & iOS项目地址:https://gitcode.com/gh_mirrors/re/react-native-netinfo

1. 项目介绍

React Native NetInfo 是一个跨平台的网络信息API库，用于Android和iOS的应用程序。它提供了获取网络连接类型、质量以及是否在线的能力。此外，这个库也支持macOS、Windows和Web平台。通过简单易用的API，开发者可以轻松地监控网络状态并做出相应的反应。

2. 项目快速启动

安装依赖

在你的React Native项目中，你可以通过以下命令安装 @react-native-community/netinfo：

yarn add @react-native-community/netinfo
# 或者使用npm
npm install --save @react-native-community/netinfo

自动链接

对于React Native版本0.60及以上，自动链接功能已经集成，所以不需要手动链接。否则，你需要手动链接库到你的项目：

iOS

npx pod-install

Android (AndroidX)

修改android/build.gradle配置：

ext {
    buildToolsVersion = "xx.yy.zz"
    minSdkVersion = xyz
    compileSdkVersion = ...
    targetSdkVersion = ...
    supportLibVersion = ...
}

然后同步Gradle：

cd android && ./gradlew clean
cd ..

使用示例

在组件中引入并使用：

import { useNetInfo } from "@react-native-community/netinfo";

const YourComponent = () => {
  const netInfo = useNetInfo();

  return (
    <View>
      <Text>类型：{netInfo.type}</Text>
      <Text>已连接：{netInfo.isConnected ? '是' : '否'}</Text>
    </View>
  );
};

3. 应用案例和最佳实践

实时监听网络变化

import { useEffect } from "react";
import { Text, View } from "react-native";
import { useNetInfo } from "@react-native-community/netinfo";

const YourComponent = () => {
  const netInfo = useNetInfo();

  useEffect(() => {
    console.log("当前网络状态:", netInfo);

    const subscription = netInfo.addEventListener((state) => {
      console.log("网络状态更新:", state);
    });

    // 返回清理函数以解除订阅
    return () => subscription.remove();
  }, []);

  return (
    <View>
      {/* ... */}
    </View>
  );
};

自定义互联网可达性测试

你可以自定义useNetInfo的配置来调整互联网可达性的测试：

import { useEffect } from "react";
import { Text, View } from "react.native";
import { useNetInfo } from "@react-native-community/netinfo";

const YourComponent = () => {
  const netInfo = useNetInfo({
    reachabilityUrl: 'https://your-custom-url.example',
    reachabilityTest: async (response) => response.status === 200,
    reachabilityLongTimeout: 60 * 1000, // 长超时时间
    reachabilityShortTimeout: 5 * 1000, // 短超时时间
  });

  // ...
};

4. 典型生态项目

React Native NetInfo 可与其他React Native生态中的库搭配使用，例如:

• axios：用于网络请求，配合NetInfo可以进行网络状况下的请求策略调整。
• redux-persist：数据持久化库，可以在网络断开时实现本地存储。
• react-navigation: 导航库，可以依据网络状态来决定是否显示离线提示页。

这些项目共同构建了React Native应用程序的健壮网络环境。

react-native-netinfoReact Native Network Info API for Android & iOS项目地址:https://gitcode.com/gh_mirrors/re/react-native-netinfo