反应原生暴露方法

时间:2017-11-14 08:00:52

标签: android react-native react-native-android

我正在使用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();
}

1 个答案:

答案 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);
  };
});

如果有更好的解决方案,请告诉我:)