android - 即使我的 native 模块已正确创建和注册，导入 NativeModules 也会给我一个空对象

Question

我正在关注 this tutorial尝试在 react-native 中使用 Java(然后使用 JNI 并使用 C 代码)。

我已经执行了所有步骤，但是当我尝试在 js 中获取 native 模块时，我得到一个空对象:

//HelloWorld.js
"use strict";
import { NativeModules } from "react-native";
console.log(NativeModules); // prints "{}"
module.exports = NativeModules.HelloWorld;

以下是我的文件内容。注意生成的android/文件夹已经通过android-studio作为项目打开，没有错误高亮。

HelloWorldModule.java :

package com.bridgemodules;

import com.facebook.react.bridge.Promise;
import com.facebook.react.bridge.ReactApplicationContext;
import com.facebook.react.bridge.ReactContextBaseJavaModule;
import com.facebook.react.bridge.ReactMethod;

public class HelloWorldModule extends ReactContextBaseJavaModule {
    public HelloWorldModule(ReactApplicationContext reactContext) {
        super(reactContext); //required by React Native
    }

    @Override
    public String getName() {
        return "HelloWorldModule"; //HelloWorld is how this module will be referred to from React Native
    }

    @ReactMethod
    public void helloWorld(Promise promise) { //this method will be called from JS by React Native
        promise.resolve("Hello World!");
    }

    @ReactMethod
    public int cloneReturn(int a) {
        return a;
    }
}

HelloWorldReactPackage.java :

package com.bridgemodules;

import com.facebook.react.ReactPackage;
import com.facebook.react.bridge.JavaScriptModule;
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 HelloWorldReactPackage implements ReactPackage {
    @Override
    public List<ViewManager> createViewManagers(ReactApplicationContext reactContext) {
        return Collections.emptyList();
    }

    @Override
    public List<NativeModule> createNativeModules(ReactApplicationContext reactContext) {
        List<NativeModule> modules = new ArrayList<>();

        modules.add(new HelloWorldModule(reactContext)); //this is where we register our module, and any others we may later add

        return modules;
    }
}

更新 MainApplication.java 文件以注册我的模块:

public class MainApplication extends Application implements ReactApplication {

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

    @Override
    protected List<ReactPackage> getPackages() {
      return Arrays.<ReactPackage>asList(
              new HelloWorldReactPackage(),
              new MainReactPackage() // Added this line
      );
    }
  };

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

  @Override
  public void onCreate() {
    super.onCreate();
    SoLoader.init(this, /* native exopackage */ false);
  }
}

自从我一步一步地按照教程进行操作后，我有点惊讶这行不通。请注意，该项目是使用 react-native-cli 生成的。我在网上看到它以可能使事情变得不同的方式改变了代码的结构。

提前致谢，我真的被这个问题困住了。

Answer 1

HelloWorld.js 中的代码通常位于模块的 index.js 中。同样通常，您会将模块包安装在要使用 native 模块的 React Native 项目中。在那里，您将使用类似于教程中的代码示例的代码:

import { NativeModules } from 'react-native';
var yourModule = NativeModules.YourModule;
// use it here

如果您在模块的 index.js 中有与 HelloWorld.js 相同的代码，您将看到 native 模块不为空。

如果您发现自己对制作模块的来龙去脉感到困惑，可以使用 react-native-create-library 来简化流程。或 react-native-create-bridge