是否有任何有關在react-native中實現JavaScriptModule的指南？

Question

有興趣實施直接原生至javascript調用反應原生。但沒有找到任何指導。

請幫助一些創建和註冊原生javascript模塊的反應本地的例子。

---

已經想通了，從官方文檔native modules android的代碼中有一個名爲createJSModules方法，它返回JavaScriptModule類的列表。

class AnExampleReactPackage implements ReactPackage { 

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

    ... 

} 

Javadoc文檔com.facebook.react.bridge.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

最後，尋找到後反應JS源，我想出溶液，則需要：

1. 擴展JavaScriptModule並將它傳遞給createJSModules定製的方法反應包（例如ActionsModule.java）。
2. 內你的反應活性getPackages方法或直接認爲ReactInstanceManager
3. 具有相同名稱在你的js代碼中創建的js文件
4. 與BatchedBridge註冊爲如下表所述註冊該軟件包。

5. 比後反應方面初始化，你可以得到它，並通過撥打：

   ActionsModule jsModule = context.getJSModule（ActionsModule.class）; jsModule.callAction（「greet」，「hello」）;

這將異步調用您註冊的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) { 
     ActionsModule 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>推演示項目，既爲Android和iOS解決GitHub的：https://github.com/dmba/rct-native2js

Answer 2

我不確定這是可能的，但你爲什麼要這麼做呢？使用NativeAppEventEmitter/DeviceEventEmitter，並將其作爲您將在JS端進行監聽的事件發送。