有兴趣直接实施native to javascript调用react-native。但没有找到任何指南。
请帮助提供一些在 React Native 中创建和注册本机 JavaScript 模块的示例。
已经从官方那里找到了代码原生模块 android文档有一个名为的方法创建JS模块，它返回一个列表JavaScript模块类。
class AnExampleReactPackage implements ReactPackage {
@Override
public List<Class<? extends JavaScriptModule>> createJSModules() {
return Collections.emptyList();
}
...
}
Javadoc 为com.facebook.react.bridge.JavaScriptModule says:
/**
* 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 {
}
我能够创建接口并将其类传递给创建JS模块但不知道如何从 js 代码注册适当的 javascript 模块。
最后，在研究了react js源之后，我找到了解决方案，你需要：
- 扩展 JavaScriptModule 并将其传递给创建JS模块自定义反应包的方法（例如 ActionsModule.java）。
- 在您的反应活动中注册该包获取包方法或直接思想React实例管理器
- 在js代码中创建同名的js文件
- 注册它批处理桥如下表所述。
-
在反应上下文初始化之后，您可以通过以下方式获取它并调用：
ActionsModule jsModule = context.getJSModule(ActionsModule.class);
jsModule.callAction("问候", "你好");
这将异步调用您注册的 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> 将演示项目推送到 github，其中包含适用于 android 和 ios 的解决方案：https://github.com/dmba/rct-native2js
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
