我正在使用Android为React Native实现自定义组件。我想实现一个可以从React本机执行的函数。我发现有一个@ReactMethod注释,但只有当我在一个扩展的类中使用它时才被React考虑:
ReactContextBaseJavaModule
但我的需求是不同的。我需要在我的组件上执行一个函数。我试图通过我的类中的@ReactNative注释来公开函数:
ViewGroupManager
但是这个功能根本不可见。是否有可能从ReactContextBaseJavaModule对象访问ViewGroupManager对象?如果不是从本机组件向ReactNative公开函数的最方便的方法是什么?
这是我的ReactContextBaseJavaModule实现:
public class VidyoModule extends ReactContextBaseJavaModule {
public VidyoModule(ReactApplicationContext reactContext) {
super(reactContext);
}
@Override
public String getName() {
return "RNTVideoManager";
}
@ReactMethod
public void showToast(){
Toast.makeText(getCurrentActivity(), "Test", Toast.LENGTH_SHORT).show();
}
@ReactMethod
public void connectToRoom(){
}
}
我能够从react执行showToast和connectToRoom函数。
以下是ViewGroupManager的实现:
public class VidyoComponentManager extends ViewGroupManager<VidyoView> {
private static final String COMPONENT_NAME = "RNTVideo";
public VidyoComponentManager(){
}
@Override
public String getName() {
return COMPONENT_NAME;
}
@Override
protected VidyoView createViewInstance(ThemedReactContext reactContext) {
return new VidyoView(reactContext);
}
@ReactMethod
public void connectToRoom(){
}
}
我的ReactPackage看起来像这样:
public class VidyoPackage implements ReactPackage {
@Override
public List<NativeModule> createNativeModules(ReactApplicationContext reactContext) {
List<NativeModule> modules = new ArrayList<>();
VidyoModule module = new VidyoModule(reactContext);
modules.add(module);
return modules;
}
@Override
public List<Class<? extends JavaScriptModule>> createJSModules() {
return Collections.emptyList();
}
@Override
public List<ViewManager> createViewManagers(ReactApplicationContext reactContext) {
return Collections.<ViewManager>singletonList(
new VidyoComponentManager()
);
}
}
在这种情况下,函数connectToRoom对于ReactNative不可见。我该怎么办?我应该用户命令吗?
public Map<String, Integer> getCommandsMap() {
return MapBuilder.<String, Integer>builder()
.put("connectToRoom", 1)
.build();
}
答案 0 :(得分:0)
已找到解决方案。要使ViewManager(android端)的函数对React Native可见,我们需要实现getCommandsMap,而不是迭代命令和&#34;注册&#34;它们作为React方面的可用功能
const commands = NativeModules.UIManager.RNTVideo.Commands;
Object.keys(commands).forEach(command => {
NativeModules.RNTVideoManager[command] = (handle, ...rawArgs) => {
const args = rawArgs.map(arg => {
if (typeof arg === 'function') {
callbackMap.set(nextCallbackId, arg);
return nextCallbackId++;
}
return arg;
});
NativeModules.UIManager.dispatchViewManagerCommand(handle, commands[command], args);
};
});
如果有更好的解决方案,请告诉我:)