React Native开发中如何在Android真机开启Live Reloading与Hot Reloading？

Hey fellow dev! If you're tired of rebuilding your app every time you make a tiny code change, these two features are going to be your new best friends. Let's break down exactly how to get them working on your Android physical device.

前置条件 #

Before diving in, make sure you've got these sorted:

• Your Android device and development computer are connected to the same WiFi network.
• You've enabled USB debugging on your device:
  1. Go to Settings > About Phone
  2. Tap "Build Number" 7 times until you see the "You are now a developer!" message
  3. Go back to Settings > Developer Options, then toggle on "USB Debugging"
• Your device is recognized by adb: Run adb devices in your terminal—you should see your device listed.

步骤1：启动你的React Native项目 #

First, fire up your project as usual with:

npx react-native run-android

This will install and launch the app on your connected device.

步骤2：打开React Native开发者菜单 #

You need to access the dev menu to enable the reloading features. There are a few ways to do this:

• Shake your device: Give your Android phone a gentle shake—most devices will trigger the menu this way.
• Use an adb command: If shaking doesn't work (some devices have finicky motion sensors), run this in your terminal:

  adb shell input keyevent 82
  

  (Keyevent 82 corresponds to the Menu key, which triggers the dev menu.)
• Add a debug button (optional): For easier access during development, you can add a touchable element in your code that opens the menu:

  import { DevSettings, TouchableOpacity, Text } from 'react-native';
  
  // Somewhere in your component
  <TouchableOpacity onPress={() => DevSettings.show()}>
    <Text style={{ padding: 16, color: 'blue' }}>Open Dev Menu</Text>
  </TouchableOpacity>
  

步骤3：启用Live Reloading #

Once the dev menu pops up:

1. Look for the "Enable Live Reload" option (it should be near the top)
2. Tap it to toggle it on—you'll see a checkmark next to it when it's active.

Now, every time you save a code change, the app will automatically reload the entire application to reflect the updates. It's like hitting "rebuild" without running the full build process.

步骤4：启用Hot Reloading #

Hot Reloading is even better—it updates only the changed parts of your code without restarting the entire app, so you keep your app's current state (like form inputs or navigation stack). Here's how to turn it on:

1. From the same dev menu, find "Enable Hot Reloading" (usually right below Live Reload)
2. Tap to toggle it on.

Pro tip: If you ever need a full reload while Hot Reload is active, you can tap "Reload" in the dev menu, or press r twice in your terminal where the Metro bundler is running.

快速区分两者 #

• Live Reloading: Reboots the entire app, resets all state. Great for major changes (like adding new components or modifying native modules).
• Hot Reloading: Updates only modified code, preserves app state. Perfect for tweaking UI styles, fixing small logic bugs, or iterating quickly on features.

常见问题排查 #

• Dev menu won't show up? Double-check that USB debugging is enabled, your device is connected via USB (or you've set up wireless adb), and adb devices lists your device.
• Reloading isn't triggering? Make sure your computer and device are on the same WiFi. If you're using a VPN, that might block the connection—try turning it off temporarily.
• Hot Reload doesn't work for a change? Some changes (like modifying index.js or native code) require a full reload or rebuild. Hot Reload works best for changes in component files.

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