deveq 블로그

React Native ] Android 네이티브 모듈 만들기 본문

개발/ReactNative

React Native ] Android 네이티브 모듈 만들기

DevEQ 2021. 6. 21. 16:54
728x90

공식문서

계획 :

  1. ExampleModule 이란 이름의 모듈을 만들고
  2. sampleMethod 란 이름의 메서드를 호출하여
  3. JS측에서 sampleMethod에 숫자값을 전달하고
  4. 안드로이드 모듈측에서 2배 곱해준 후 callback으로 전달하기
// ExampleManager.java
public class ExampleManager extends ReactContextBaseJavaModule {

    @NonNull
    @Override
    public String getName() {
        // JS에 노출할 이름을 지정합니다.
        return "ExampleModule";
    }


    //메서드를 선언하려면 ReactMethod어노테이션이 필요합니다.
    @ReactMethod
    //이 메서드의 이름으로 JS측에서 함수를 호출할 수 있습니다.
    public void sampleMethod(double num, Callback callback) {
        double result = num * 2;
        callback.invoke(result);
    }

}
// ExamplePackage.java
public class ExamplePackage implements ReactPackage {

    @NonNull
    @Override
    public List<NativeModule> createNativeModules(@NonNull ReactApplicationContext reactContext) {
        // 만들었던 Manager클래스를 넣어서 반환해줍니다. 
        List list = Arrays.<NativeModule>asList(
            new ExampleManager()
        );
        return list;
    }

    @NonNull
    @Override
    public List<ViewManager> createViewManager(@NonNull ReactApplicationContext reactContext) {
        //UI Component를 만든 경우 여기에 반환합니다.
        //기본코드에는 null을 반환하도록 되어있으나
        //여기에 null이 반환될 경우 에러가 날 수 있으므로 emptyList를 반환해주는것이 좋습니다.
        return Collections.emptyList();
    }
}
// MainApplication.java
// getPackages 메서드에 위에서 구현한 Package를 추가해줍니다.
@Override
protected List<ReactPackgage> getPackages() {
    List<ReactPackage> packages = new PackageList(this).getPackages();

    packages.add(new ExamplePackage());
    return packages;
}

JS부분은 앞에서 작성한 iOS 네이티브 모듈 만들기와 동일하게 작성합니다