React Native JS调用Android原生模块失败，咨询模块导出方式

Hey there! Let's work through this React Native Android native module issue step by step.

First: Where to "Export" the Android Native Module #

Let's clarify first—you don't export the native module from JS files. The export/registration happens entirely on the Android native side. Here's the correct workflow:

1. Create Your Native Module Class #

Your Java class must inherit ReactContextBaseJavaModule and implement the getName() method (this is the name you'll call from JS). Also, mark methods you want to expose to JS with the @ReactMethod annotation.

// ScannerInteractorModule.java
import com.facebook.react.bridge.ReactContextBaseJavaModule;
import com.facebook.react.bridge.ReactApplicationContext;
import com.facebook.react.bridge.ReactMethod;

public class ScannerInteractorModule extends ReactContextBaseJavaModule {
    public ScannerInteractorModule(ReactApplicationContext reactContext) {
        super(reactContext);
    }

    // This name MUST match what you use in NativeModules on JS side (case-sensitive!)
    @Override
    public String getName() {
        return "ScannerInteractor";
    }

    // Example method exposed to JS
    @ReactMethod
    public void launchScanner() {
        // Put your native scanning logic here
    }
}

2. Create a Custom ReactPackage #

Wrap your module in a ReactPackage implementation to let React Native know about it:

// CustomReactPackage.java
import com.facebook.react.ReactPackage;
import com.facebook.react.bridge.NativeModule;
import com.facebook.react.bridge.ReactApplicationContext;
import com.facebook.react.uimanager.ViewManager;
import java.util.ArrayList;
import java.util.Collections;
import java.util.List;

public class CustomReactPackage implements ReactPackage {
    @Override
    public List<NativeModule> createNativeModules(ReactApplicationContext reactContext) {
        List<NativeModule> modules = new ArrayList<>();
        // Add your native module to the list
        modules.add(new ScannerInteractorModule(reactContext));
        return modules;
    }

    @Override
    public List<ViewManager> createViewManagers(ReactApplicationContext reactContext) {
        return Collections.emptyList(); // No custom views needed here
    }
}

3. Register the Package in Your Application Class #

Add your custom ReactPackage to the list of packages in MainApplication.java:

// MainApplication.java
import android.app.Application;
import com.facebook.react.ReactApplication;
import com.facebook.react.ReactNativeHost;
import com.facebook.react.ReactPackage;
import com.facebook.react.defaults.DefaultReactNativeHost;
import java.util.List;

public class MainApplication extends Application implements ReactApplication {

    private final ReactNativeHost mReactNativeHost =
            new DefaultReactNativeHost(this) {
                @Override
                public boolean getUseDeveloperSupport() {
                    return BuildConfig.DEBUG;
                }

                @Override
                protected List<ReactPackage> getPackages() {
                    List<ReactPackage> packages = new PackageList(this).getPackages();
                    // Add your custom package here
                    packages.add(new CustomReactPackage());
                    return packages;
                }

                @Override
                protected String getJSMainModuleName() {
                    return "index";
                }
            };

    @Override
    public ReactNativeHost getReactNativeHost() {
        return mReactNativeHost;
    }

    @Override
    public void onCreate() {
        super.onCreate();
        // Keep existing onCreate logic
    }
}

Second: JS Side Export & Usage #

Your two index.js approaches are both valid—here's how to use them correctly:

Option 1: ES6 Export #

// index.js
import { NativeModules } from 'react-native';
const { ScannerInteractor } = NativeModules;
export default ScannerInteractor;

Use it in components like this:

import ScannerInteractor from './path/to/index';

// Call the native method
ScannerInteractor.launchScanner();

Option 2: CommonJS Export #

// index.js
import { NativeModules } from 'react-native';
module.exports = NativeModules.ScannerInteractor;

Usage:

const ScannerInteractor = require('./path/to/index');
ScannerInteractor.launchScanner();

Quick Troubleshooting Checks #

If it's still not working, verify these:

• Double-check that the getName() return value matches the name you're accessing in NativeModules (it's case-sensitive!)
• Ensure all methods exposed to JS have the @ReactMethod annotation (and they return void—use promises/callbacks for return values)
• Rebuild your Android project after native code changes (run npx react-native run-android again)
• Confirm any required permissions (like camera access for scanning) are added to AndroidManifest.xml

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