Как реализовать метод компонента React Native UI в Android

Question

Для меня ясно, что для собственных модулей реагирующих мы можем использовать @ReactMethod экспортировать метод и вызывать его из JSX, но как нам сделать то же самое с компонентами UI, реагирующими на встроенный интерфейс?

В документации я вижу только @ReactProp упоминается Если @ReactMethod не работает, как мне получить доступ к свойству родного компонента пользовательского интерфейса из JSX? (На iOS это можно сделать на нативных компонентах интерфейса RCT_EXPORT_METHOD а на андроиде что-то подобное возможно?)

Спасибо.

Answer 1

Хорошо, я закончил тем, что создал модуль и передал ссылку на компонент пользовательского интерфейса на его конструктор:

Вот мой компонент пользовательского интерфейса:

public class RCTACCalendarManager extends ViewGroupManager <RCTACCalendar> {
    public static final String REACT_CLASS = "RCTACCalendar";
    private RCTACCalendar calendarInstance;
    public RCTACCalendarManager(ReactApplicationContext reactContext) {
            super();
        }

        @Override
        public String getName() {
            return REACT_CLASS;
        }


        @Override
        public RCTACCalendar createViewInstance(ThemedReactContext context) {
            calendarInstance = new RCTACCalendar(context);
            return calendarInstance;
    }

    public RCTACCalendar getCalendarInstance() { // <-- returns the View instance
        return calendarInstance;
    }

}

Вот модуль, который я создал для этого компонента:

public class RCTACCalendarModule extends ReactContextBaseJavaModule {

    private RCTACCalendar calendarInstance;

    public RCTACCalendarModule(ReactApplicationContext reactContext, RCTACCalendarManager calManager) {
        super(reactContext);
        if (calManager != null) {
            calendarInstance = calManager.getCalendarInstance();
        }

    }

    @Override
    public String getName() {
        return "ACCalendarManager";
    }

    @ReactMethod
    public void mySuperDuperFunction(Promise promise) {
        if (calendarInstance  != null) {
            calendarInstance.mySuperDuperFunction(promise); // <-- Magic
        }
    }
}

и вот как я объединяю эти два в моем объявлении пакета:

public class RCTACCalendarPackage implements ReactPackage {

    private RCTACCalendarManager calManager;

    @Override
    public List<NativeModule> createNativeModules(ReactApplicationContext reactContext) {
        if (calManager == null) {
            calManager = new RCTACCalendarManager(reactContext);
        }
        return Arrays.<NativeModule>asList(
                new RCTACCalendarModule(reactContext, calManager)
        );

    }

    @Override
    public List<ViewManager> createViewManagers(ReactApplicationContext reactContext) {
        if (calManager == null) {
            calManager = new RCTACCalendarManager(reactContext);
        }
        return Arrays.<ViewManager>asList(
            calManager
        );
    }
}

Отлично работает.

Answer 2

Существующий ответ отлично работает, если вам нужна только поддержка Android, но я обнаружил, что он не работает, когда я пытался интегрироваться с iOS. Я потратил довольно много времени, пытаясь внедрить этот метод в iOS, поэтому я рекомендую то, что придумал вместо этого:UIManager который идет с react-native.

Компонент React Native

...
import { UIManager, findNodeHandle } from 'react-native';

class ComponentWithNativeFunctionality extends React.Component {
   const myRef = React.createRef();

   functionToCall = () => {
      UIManager.dispatchViewManagerCommand(
         findNodeHandle(this.myRef.current),
         "nameOfFunctionToCallInNativeLand",
         [/* additional arguments */]
      );
   }

   render() {
     return <NativeComponentView ref={this.myRef} />
   }

}

Android

public class YourViewManager extends SimpleViewManager<YourView> {

  ...

  @Override
  public void receiveCommand(YourView view, String commandId, @Nullable ReadableArray args) {
    super.receiveCommand(view, commandId, args);
    switch (commandId) {
      case "nameOfFunctionToCallInNativeLand":
        view.nameOfFunctionToCallInNativeLand();
        break;
    }
  }

}

iOS (со Swift)

1. Добавить #import "React/RCTUIManager.h" на ваш Bridging-Header.h

// YourViewManager.m
@interface RCT_EXTERN_MODULE(YourViewManagerClass, RCTViewManager)
...
RCT_EXTERN_METHOD(
    nameOfFunctionToCallInNativeLand: (nonnull NSNumber *)node
)

@end

// YourViewManagerClass.swift

@objc(YourViewManagerClass)
class YourViewManagerClass: RCTViewManager {

    @objc func nameOfFunctionToCallInNativeLand(_ node: NSNumber) -> Void {
        DispatchQueue.main.async {
            let component = self.bridge.uiManager.view(
              forReactTag: node
            ) as! MisnapCameraView
            component.nameOfFunctionToCallInNativeLand()
        }
    }

}

Еще одно замечание: вы не можете передать Promise, как с модулями. Вам нужно будет передать уникальный идентификатор, сгенерированный в JS, а затем, как только ваше действие будет выполнено, запустить событие, чтобы вернуть результат в JS с идентификатором, прикрепленным к событию.

Answer 3

Для реагирующего нативного компонента пользовательского интерфейса Android вы должны сделать свой класс представления расширяемым SimpleViewManager,

Смотрите документ здесь.