Android Native 모듈 React Native 에서 사용하기

최근 개발중인 플랫폼이 React Native 라 Native 모듈 형태로 제공하는 우리 라이브러리를 사용할 수 없다는 얘기를 들었다. 이럴때 공부 해봐야지 언제 할까 라는 생각으로 당장 시작해 보았다.

 

먼저, 기존에 사용하던 메소드들을 Wrapping 해주는 Wrapper 클래스가 필요하다.

이때, Wrapper 클래스는 ReactContextBaseJavaModule 이라는 클래스를 상속 받아야 하는데 해당 클래스를 상속받기 위해선 gradle 에 아래 코드를 추가해 주어야 한다.

implementation 'com.facebook.react:react-native:+';

 

Wrapper 클래스를 개발할 때 context 값을 주의해야 한다. 기존에 context 값을 인자로 받던 메소드가 있었다면 여기서는 ReactApplicationContext 값으로 대체된다. 아래의 예시 코드를 보자.

public class ReactNWrappingClass extends ReactContextBaseJavaModule {

    private static ReactApplicationContext reactApplicationContext;
    private int nReturn = 0;

    public ReactNWrappingClass(ReactApplicationContext reactApplicationContext) {
        super(reactApplicationContext);
        this.reactApplicationContext = reactApplicationContext;
    }

    @Override
    public String getName() {
        return "ReactNWrappingClass";
    }
    
    @ReactMethod
    public void sampleFunc() {
        Context context = reactApplicationContext;
        nReturn = doSomething(context);
    }
}

 

최초 생성자에서 ReactApplicationContext 값을 지정해주고 sampleFunc 함수를 보면 기존처럼 context 값을 받아 사용하는 것이 아닌 처음 받아둔 reactApplicationContext 값을 가져와 사용하는 것을 볼 수 있다.

 

그리고 위 샘플 코드에서도 볼 수 있듯이 React Native 에서 메소드를 호출하기 위해선 @ReactMethod 어노테이션이 필요하다. 이번에는 override 되어있는 getName() 메소드는 어떻게 사용되는지 알아보자.

var SampleClass = NativeModules.ReactNWrappingClass;
SampleClass.sampleFunc();

 

React Native 의 Script 코드에서 NativeModules.getName 에서 지정한 이름 형태로 클래스를 불러오게 된다. 위 샘플에서 "ReactNWrappingClass" 를 리턴했으므로 NativeModule.ReactNWrappingClass 형태로 가져온 것을 볼 수 있다.

 

그리고 NativeModules 클래스를 사용하기 위해선 Script에 아래와 같이 import 가 필요하다.

import NativeModules from 'react-native';

 

그럼 이제 Native 모듈을 사용하는 기본 과정은 모두 끝이 났다. 여기서 추가적으로 Native 모듈에서 실행된 결과의 리턴 값을 받는 방법에 대해 알아보자.

 

일반 return 문으로는 React Native Script 에서 해당 리턴 값을 받을 수 없어 callback 함수를 사용해야 한다.

@ReactMethod
public void getReturnValue(Callback callback) {
    callback.invoke(nReturn);
}

 

첫 번째 샘플 코드를 보면 doSomething() 메소드의 리턴 값을 nReturn 변수에 넣는 것을 볼 수 있다. Script 상에서 sampleFunc() 동작이 끝난 뒤 getReturnValue() 메소드를 호출해 아래와 같이 nReturn 값을 callback 으로 받으면 된다.

SampleClass.getReturnValue((nRtn) => {
  console.debug(nRtn);
})