React Native에서 네이티브 모듈 간의 상호 통신

React Native 앱은 네이티브 모듈로 확장할 수 있습니다.
JavaScript에서 사용하기 쉽지만 기본 모듈 간에 사용하는 방법은 공식적으로 문서화되어 있지 않습니다.
저는 여러 개의 고유한 기본 모듈을 가지고 있으며 중복 코드 작성을 피하기 위해 ObjC/Swift/Java/Kotlin의 다른 기본 모듈에서 해당 메소드를 호출하고 싶었습니다.
이를 수행하는 방법을 이해하기 위해 React Native의 핵심을 파헤쳤습니다.

아이폰 OS

RCTBridge 이해하기

RCTBridge는 JavaScript 앱과 통신하기 위한 클래스입니다.
다른 기본 모듈과 함께 작업할 수 있는 몇 가지 유용한 방법을 제공합니다.

/**
 * Retrieve a bridge module instance by name or class. Note that modules are
 * lazily instantiated, so calling these methods for the first time with a given
 * module name/class may cause the class to be synchronously instantiated,
 * potentially blocking both the calling thread and main thread for a short time.
 *
 * Note: This method does NOT lazily load the particular module if it's not yet loaded.
 */
- (id)moduleForName:(NSString *)moduleName;
- (id)moduleForName:(NSString *)moduleName lazilyLoadIfNecessary:(BOOL)lazilyLoad;
// Note: This method lazily load the module as necessary.
- (id)moduleForClass:(Class)moduleClass;

이러한 메서드를 사용하여 모듈의 인스턴스를 가져올 수 있습니다.

RCTBridge 인스턴스 가져오기

브리지 모듈에서 다음과 같이 RCTBridge에 대한 속성을 추가해야 합니다.

@interface YourModule : NSObject <RCTBridgeModule>

@property (nonatomic, weak) RCTBridge *bridge;

@end

@implementation YourModule

@synthesize bridge = _bridge;

@end

그게 다야.bridge 속성은 모듈이 초기화될 때 자동으로 설정됩니다.

다른 네이티브 모듈 인스턴스 가져오기

예를 들어 다음과 같이 RCTUIManager의 인스턴스를 얻을 수 있습니다.

#import <React/RCTUIManager.h>

RCTUIManager* uiManager = [self.bridge moduleForClass:[RCTUIManager class]];

또는 다음과 같이 이름으로 가져올 수 있습니다.

#import <React/RCTUIManager.h>

RCTUIManager* uiManager = [self.bridge moduleForName:@"RCTUIManager"];

기계적 인조 인간

ReactContext 이해하기

ReactContext 클래스는 iOS의 RCTBridge와 유사합니다.
다음과 같이 다른 기본 모듈과 함께 작업할 수 있는 편리한 방법을 제공합니다.

  /** @return the instance of the specified module interface associated with this ReactContext. */
  public <T extends NativeModule> T getNativeModule(Class<T> nativeModuleInterface)

이를 통해 클래스별로 네이티브 모듈의 인스턴스를 얻을 수 있습니다.

ReactContext 인스턴스 가져오기

브리지 모듈에서 코드는 이미 다음과 같아야 합니다.

public class YourModule extends ReactContextBaseJavaModule {
    private final ReactApplicationContext reactContext;

    public AttachmentProcessorModule(ReactApplicationContext reactContext) {
        super(reactContext);
        this.reactContext = reactContext;
    }

따라서 this.reactContext를 통해 빠르게 액세스할 수 있습니다.

다른 네이티브 모듈 인스턴스 가져오기

예를 들어 다음과 같이 UIManagerModule의 인스턴스를 얻을 수 있습니다.

import com.facebook.react.uimanager.UIManagerModule;

UIManagerModule uiManagerModule = this.reactContext.getNativeModule(UIManagerModule.class);

이제 다른 모듈의 메서드를 호출할 수 있습니다.
도움이 되길 바랍니다.

나를 따라와 &

Inkdrop — Markdown note-taking app

Solo developer's Discord community