React Native run-android遇'NativeModules'异常，求清理重建方案

Hey there, let’s break this down step by step—since your build completes but lands on an error page, we’ll start with the critical checks before diving into a full clean rebuild.

Key Areas to Focus On #

1. Read the Error Screen/Logs Carefully #

Don’t skip the details on that error page! React Native’s red (or custom) error screen will tell you exactly what’s wrong:

• If it’s a JS bundle issue (like "Could not connect to development server"), that’s a metro/server problem.
• If it’s a native crash, grab the stack trace from Android Studio’s Logcat (filter by your app’s package name) to spot conflicts in native modules or dependencies.
• Look for permission errors (e.g., missing camera/storage permissions in AndroidManifest.xml) if you’re using modules that require device access.

2. Verify Metro Server & Device Connection #

• Make sure the Metro bundler is running (you should see its terminal window with the "Loading dependency graph..." message). If not, start it manually with npx react-native start.
• Run adb reverse tcp:8081 tcp:8081 to ensure your Android device can reach the local Metro server (this fixes most "bundle not found" issues).
• Confirm your device is properly connected: run adb devices—it should show your device with "device" status, not "unauthorized" (if it’s unauthorized, check your device’s USB debugging prompt).

3. Check Third-Party Module Configuration #

Since you’ve added custom modules, double-check:

• For RN 0.60+, auto-linking usually works, but some modules still require manual steps (like adding entries to AndroidManifest.xml, modifying build.gradle versions, or linking native libraries).
• Ensure module versions are compatible with your React Native version (check the module’s docs for supported RN versions—mismatches often cause silent build success but runtime crashes).
• Look for duplicate dependencies: run cd android && ./gradlew dependencies to spot conflicting library versions (e.g., two modules requiring different versions of com.google.android.gms).

4. Gradle Version & Build Configuration #

• Verify that android/build.gradle has the correct compileSdkVersion, targetSdkVersion, and gradleVersion matching your React Native’s requirements (check the RN release notes for your version).
• If you’ve modified gradle.properties or app/build.gradle recently, revert any untested changes—small tweaks (like enabling minification prematurely) can break runtime behavior even if builds pass.

Full Clean & Rebuild Steps for Android #

If the above checks don’t fix it, a full clean rebuild often clears cached conflicts. Here’s how to do it on Mac:

1. Stop all running services

   • Kill the Metro bundler (Ctrl+C in its terminal window).
   • Close Android Studio if it’s open.

2. Clear React Native & Node caches

   watchman watch-del-all
   rm -rf node_modules
   npm install # or yarn install if you use yarn
   rm -rf $TMPDIR/react-*
   rm -rf $TMPDIR/metro-*
   

3. Clean Android project files

   cd android
   ./gradlew clean
   rm -rf .gradle
   rm -rf app/build
   cd ..
   

4. Rebuild & run

   • Start Metro with cache reset: npx react-native start --reset-cache
   • Open a new terminal tab and run: npx react-native run-android

If you still hit issues, try opening the android folder in Android Studio and running the app directly—this will give you more detailed build/runtime logs in Logcat, which often reveals the root cause.

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