React Native Android NativeModules 사용

네이티브 모듈이란 무엇입니까?

네이티브 모듈은 각 플랫폼에 대해 기본적으로(natively) 구현되는 일련의 자바 스크립트 함수입니다(이 경우 iOS 및 Android). 네이티브 기능이 필요한 경우 또는 리엑트 네이티브에 모듈이 없거나 네이티브 성능이 더 좋은 경우에 사용됩니다.

연결방법 

1. React Native 프로젝트 폴더의 MainActivity.java가 위치한 폴더에 추가할 모듈 파일을 만든다. 

파일명은 기능명 끝에 각각 Modulerhk Package를 붙여주어 구분하면 좋다. 각각의 역할이 다르기 때문

Module은 자신이 개발한 Nativer 기능을 구현하며 Package가 React Native와의 연결을 담당한다. 

 

예시는 OpenExternalURLModule.java , OpenExternalURLPackage.java 로 이 두 가지 java 파일은 디바이스 설정 페이지로 이동하는 기능을 제공한다.

 

2.  OpenExternalURLModule.java 

 a) 우선 상단에는 React Native에서 제공해주는 라이브러리를 풀러온다. 

package com.anilog2;
import com.facebook.react.bridge.ReactApplicationContext;
import com.facebook.react.bridge.ReactContext;
import com.facebook.react.bridge.ReactContextBaseJavaModule;
import com.facebook.react.bridge.ReactMethod;

b) 기존 extends ReactActivity로 상속받았던 부분은 ReactContextBaseJavaModule로 변경

c) private static ReactApplicationContext reactContext 변수를 선언한 뒤 생성자함수를 아래와 같이 구현. 

private ReactApplicationContext mContext;
public OpenExternalURLModule(ReactApplicationContext reactContext){
super(reactContext);
mContext = reactContext;
}

d)모듈 이름 

Android의 모든 Java 기본 모듈은 getName() 메서드를 구현해야 합니다. 이 메서드는 기본 모듈의 이름을 나타내는 문자열을 반환합니다. 그런 다음 네이티브 모듈은 해당 이름을 사용하여 JavaScript에서 액세스할 수 있습니다. 예를 들어, 아래 코드 스니펫에서 getName() 은 "OpenExternalURLModule" 을 반환

public static final String NAME = "OpenExternalURLModule";

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

e) 기능 소스를 넣어준다. React Native에서 쓸 함수에 @ReactMethod 어노테이션을 붙여준다.

 @ReactMethod
    public void generalSettings() {
        Intent intent = new Intent(Settings.ACTION_LOCATION_SOURCE_SETTINGS);
        intent.addFlags(Intent.FLAG_ACTIVITY_NEW_TASK);
        intent.addFlags(Intent.FLAG_ACTIVITY_NO_HISTORY);
            Log.d("startActivity","fromTime: ");
        if (intent.resolveActivity(mContext.getPackageManager()) != null) {
            mContext.startActivity(intent);
        }
    }

3. OpenExternalURLPackage.java

a) React Native와 연결해줄 Package 파일에도 라이브러리를 우선 불러온다.

package com.anilog2;
import androidx.annotation.NonNull;
import com.facebook.react.ReactPackage;
import com.facebook.react.bridge.NativeModule;
import com.facebook.react.bridge.ReactApplicationContext;
import com.facebook.react.uimanager.ViewManager;

import java.util.List;
import java.util.ArrayList;
import java.util.Collections;
import java.util.List;

 

b) 다음으로 인터페이스를 구현해준다.

public class OpenExternalURLPackage implements ReactPackage{

    @NonNull
    @Override
    public List<NativeModule> createNativeModules(@NonNull ReactApplicationContext reactContext) {
        List<NativeModule> modules = new ArrayList<>();
        modules.add(new OpenExternalURLModule(reactContext));
        return modules;
    }

    @NonNull
    @Override
    public List<ViewManager> createViewManagers(@NonNull ReactApplicationContext reactContext) {
        return Collections.emptyList();
    }
}

4.  MainApllication.java에서 만든 패키지를 추가

 @Override
        protected List<ReactPackage> getPackages() {
          @SuppressWarnings("UnnecessaryLocalVariable")
          List<ReactPackage> packages = new PackageList(this).getPackages();
          // Packages that cannot be autolinked yet can be added manually here, for example:
          // packages.add(new MyReactNativePackage());
            packages.add(new MyAppPackage());
            packages.add(new PhotoListPackage());
            packages.add(new TextMeasurePackage());
            packages.add(new OpenExternalURLPackage()); //좌측 추가
            packages.add(new ReactVideoPackage());
            packages.add(new RNVideoEditorSDKPackage());
          return packages;
        }

5.  실제 javascript에서 사용

	NativeModules.OpenExternalURLModule.generalSettings();