如何限制React Native应用仅联网启动并提示离线用户

要实现禁止用户在离线状态下打开应用，并显示指定提示，你可以借助@react-native-community/netinfo库检测网络连接状态，结合组件渲染逻辑完成需求。

步骤1：安装依赖 #

首先安装网络状态检测库：

# 使用npm
npm install @react-native-community/netinfo

# 或使用yarn
yarn add @react-native-community/netinfo

注：React Native 0.60+版本会自动完成链接，无需额外执行link命令。

步骤2：实现核心逻辑 #

在根组件（通常是App.js）中添加网络状态检测与拦截逻辑：

import React, { useState, useEffect } from 'react';
import { View, Text, StyleSheet } from 'react-native';
import NetInfo from '@react-native-community/netinfo';

const App = () => {
  const [isConnected, setIsConnected] = useState(null);

  useEffect(() => {
    // 初始化检测网络状态
    const checkNetworkStatus = async () => {
      const state = await NetInfo.fetch();
      setIsConnected(state.isConnected);
    };

    checkNetworkStatus();

    // 监听网络状态变化（可选：处理应用运行中网络切换的情况）
    const unsubscribe = NetInfo.addEventListener(state => {
      setIsConnected(state.isConnected);
    });

    return () => unsubscribe();
  }, []);

  // 初始加载时等待检测结果，不显示内容
  if (isConnected === null) {
    return null;
  }

  // 离线状态显示提示
  if (!isConnected) {
    return (
      <View style={styles.offlineContainer}>
        <Text style={styles.offlineText}>您当前处于离线状态，请开启网络连接以使用本应用</Text>
      </View>
    );
  }

  // 在线状态渲染主应用内容
  return (
    <View style={styles.appContainer}>
      {/* 替换为你的主应用组件 */}
      <Text>应用主内容</Text>
    </View>
  );
};

const styles = StyleSheet.create({
  offlineContainer: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#fff',
    paddingHorizontal: 20,
  },
  offlineText: {
    fontSize: 16,
    color: '#333',
    textAlign: 'center',
  },
  appContainer: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
});

export default App;

关键说明 #

• 初始状态处理：isConnected初始设为null，避免应用启动时短暂显示错误内容，等待网络检测结果返回后再渲染对应界面。
• 网络状态监听：添加NetInfo.addEventListener可在应用运行中实时响应网络切换，比如用户在线打开应用后断网，也会自动显示离线提示（不需要此功能可移除监听）。
• Android权限配置：在AndroidManifest.xml中确保已添加网络权限：

  <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
  

内容的提问来源于stack exchange，提问作者Rahul Aadam