React本地公开方法

Question

我正在使用Android为React Native实现自定义组件。我想实现一个可以从React native执行的函数。我发现有一个@ReactMethod注释，但只有当我在扩展的类中使用它时，React才会考虑它：

ReactContextBaseJavaModule

但我的需求不同。我需要在我的组件上执行一个函数。我试图在我的类中通过@ReactNative注释公开函数，该注释扩展为：

ViewGroupManager

但此函数对于react根本不可见。是否有可能从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();
}

Answer 1

已找到解决方案。为了使ViewManager(android端)中的函数对React Native可见，我们需要实现getCommandsMap，而不是迭代命令并将其"注册"为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);
};
});

如果有更好的解决方案，请告诉我：)