React Native模拟设备断网及Genymotion断连后的开发调试方法咨询

Great question—this is such a common pain point when testing offline behavior while trying to keep your dev workflow smooth. Let’s break down reliable ways to simulate offline states and avoid those annoying red screens when your device loses connection to the Metro bundler.

一、优雅模拟断网（不中断开发连接） #

If you want to test offline behavior without actually disconnecting your device from Metro (so you can keep hot reloading and debugging), these methods work best:

1. 手动添加开发环境的离线模拟开关 #

Add a simple toggle in your app’s root component to mock network failures globally. This lets you switch between online/offline instantly without touching device settings:

import { useState, useEffect } from 'react';
import { View, Button, Text } from 'react-native';

function App() {
  const [isOffline, setIsOffline] = useState(false);

  useEffect(() => {
    if (__DEV__) {
      // Override global fetch to mock offline behavior
      const originalFetch = global.fetch;
      global.fetch = async (...args) => {
        if (isOffline) {
          return Promise.reject(new Error('Mocked offline: Network request failed'));
        }
        return originalFetch(...args);
      };

      // Clean up when component unmounts
      return () => {
        global.fetch = originalFetch;
      };
    }
  }, [isOffline]);

  return (
    <View style={{ flex: 1, padding: 20, justifyContent: 'center' }}>
      {/* Your app's main content here */}
      {__DEV__ && (
        <View style={{ marginBottom: 20 }}>
          <Text style={{ marginBottom: 10, textAlign: 'center' }}>
            Current state: {isOffline ? 'Offline' : 'Online'}
          </Text>
          <Button
            title={isOffline ? 'Go Online' : 'Go Offline'}
            onPress={() => setIsOffline(!isOffline)}
            color={isOffline ? '#2ecc71' : '#e74c3c'}
          />
        </View>
      )}
    </View>
  );
}

export default App;

2. 使用专门的离线状态管理库 #

Libraries like react-native-offline simplify offline handling and include built-in dev tools for simulating offline states. It handles network state monitoring, request caching, and retry logic out of the box. You can use its OfflineProvider to wrap your app and toggle offline mode via context or dev menu.

二、避免断网时的Metro红屏错误 #

When you actually disconnect your device (e.g., turn off WiFi on Genymotion/physical device), React Native throws a red screen because it can’t reach the Metro bundler. Here’s how to fix that:

1. 预打包离线Bundle #

Build a local offline bundle and install it on your device/simulator. This way, the app loads from the local bundle instead of relying on Metro, even when offline.

For Android:

# Generate the offline bundle
npx react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res/

# Run the app with the local bundle
npx react-native run-android

For iOS:

# Generate the offline bundle
npx react-native bundle --platform ios --dev false --entry-file index.js --bundle-output ios/main.jsbundle --assets-dest ios/

# Run via Xcode or use this command to load the local bundle
npx react-native run-ios --configuration Release

If you want to use Debug mode with the offline bundle, edit the "Bundle React Native code and images" build phase in Xcode: change DEV=1 to DEV=0 in the script.

2. 添加自定义错误边界 #

Catch the "Could not connect to development server" error and show a friendly message instead of the red screen. This keeps your dev experience polished even when the connection drops:

import React from 'react';
import { View, Text, Button } from 'react-native';

class MetroErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasMetroError: false };
  }

  static getDerivedStateFromError(error) {
    // Detect Metro connection errors
    if (error.message.includes('Could not connect to development server')) {
      return { hasMetroError: true };
    }
    return null;
  }

  render() {
    if (this.state.hasMetroError) {
      return (
        <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center', padding: 20 }}>
          <Text style={{ fontSize: 16, textAlign: 'center', marginBottom: 15 }}>
            Oops! Lost connection to the dev server.
          </Text>
          <Button
            title="Reconnect & Reload"
            onPress={() => {
              import('react-native').then(({ DevSettings }) => DevSettings.reload());
            }}
          />
        </View>
      );
    }
    return this.props.children;
  }
}

// Wrap your app with the error boundary
function RootApp() {
  return (
    <MetroErrorBoundary>
      <App />
    </MetroErrorBoundary>
  );
}

三、开发阶段最佳实践 #

• Use mock toggles for daily testing: This lets you iterate on offline logic without disrupting hot reloading or debugging.
• Prebundle for real offline testing: When you need to test how the app behaves on a truly disconnected device, use the offline bundle method.
• Combine with network logging: Use React Native Debugger’s network tab to verify that mock offline requests are being intercepted correctly.

内容的提问来源于stack exchange，提问作者Kamran Akbary