在react native中实现JavaScriptModule有什么指南吗？

Question

有兴趣在react-local中实现直接本机到javascript的调用。但没有找到任何指南。

请提供一些在react native中创建和注册javascript本机模块的示例。

已经发现来自官方本机模块android留档的代码有一个名为createJSModules的方法，它返回JavaScriptModule类的列表。

class AnExampleReactPackage implements ReactPackage {

  @Override
  public List<Class<? extends JavaScriptModule>> createJSModules() {
    return Collections.emptyList();
  }

  ...

}

Javadoc for com。脸谱网。反应桥JavaScriptModule说：

/**
 * Interface denoting that a class is the interface to a module with the same name in JS. Calling
 * functions on this interface will result in corresponding methods in JS being called.
 * ...
 */
@DoNotStrip
public interface JavaScriptModule {
}

我能够创建接口并将其类传递给createJSModules，但不知道如何从js代码中注册适当的javascript模块。

Answer 1

我不确定这是否可能，但您为什么要这样做？使用NativeAppEventEmitter/DeviceEventEmitter并将其作为您将在JS端收听的事件发送。

Answer 2

最后，在查看了reactjs源代码之后，我想出了解决方案，您需要：

>

扩展JavaScriptModule并将其传递给定制react包（例如ActionsModule.java）的createJSModules方法

在react activity getPackages方法或ReactInstanceManager中注册该包

在js代码中创建同名js文件

如下面清单所示，将其注册到BatchedBridge

在react上下文初始化之后，您可以通过以下方式获取并调用：

ActionsModule jsModule=上下文。getJSModule（ActionsModule.class）；JS模块。呼叫动作（“问候”、“你好”）；

这将异步调用您注册的js模块方法。

// AppPackage.java
public class AppPackage implements ReactPackage {

    @Override
    public List<NativeModule> createNativeModules(ReactApplicationContext reactContext) {
        return Collections.emptyList();
    }

    @Override
    public List<Class<? extends JavaScriptModule>> createJSModules() {
        return Arrays.<Class<? extends JavaScriptModule>>asList(
                ActionsModule.class
        );
    }

    @Override
    public List<ViewManager> createViewManagers(ReactApplicationContext reactContext) {
        return Collections.emptyList();
    }

}

// ActionsModule.java
public interface ActionsModule extends JavaScriptModule {

    void callAction(String type, String value);

}

// MyReactActivity.java
public class MyReactActivity extends ReactActivity implements ReactInstanceManager.ReactInstanceEventListener {

    ...

    @Override
    public void onReactContextInitialized(ReactContext context) {
        Acthtml" target="_blank">ionsModule jsModule = context.getJSModule(ActionsModule.class);

        jsModule.callAction("greet", "hello");
    }

    ...

}

// ActionsModule.js
var ActionsModule = {

  callAction(type, value) {
    console.log("callAction => " + type + ":" + value);
  },

}

module.exports = ActionsModule;

// index.android.js
import {
  AppRegistry
} from 'react-native';

import App from './components/App';

// js module registration
var BatchedBridge = require('BatchedBridge');
var ActionsModule = require('./ActionsModule');

BatchedBridge.registerCallableModule(
  'ActionsModule',
  ActionsModule
);
//~ js module registration

AppRegistry.registerComponent('MyApp', () => App);

UPD