React-Native

안드로이드 네이티브 코드 연동

Dean83 2022. 6. 7. 09:50

0. 기본 전제조건

     - React-native 환경설정을 인터넷 검색으로 수행

     - 기본 앱을 생성

     - 생성된 기본 앱 폴더 -> 안드로이드 프로젝트 열기

     - 생성된 기본 앱 폴더 -> app.js (React-native 소스코드) 열기  

 

1. React-native 에서 안드로이드 네이티브 함수 호출하기

    - React-native 로 만든 프로젝트 -> 안드로이드 프로젝트를 열고, 클래스를 추가한다. 

    - 해당 클래스는 ReactContextNaseJavaModule을 상속 받도록 한다. 

    - ReactApplicationContext 변수 설정 및 ReactMethod 함수도 등록해놓는다

    - app.js 에서, const 변수명 = NativeModules.클래스명 (위 안드로이드에서 생성한 클래스)

    - 변수명.함수 를 통해 호출이 가능하다. 

 

2. 안드로이드 네이티브에서 React-native로 이벤트 전달 (1. React-native 작업)

    - app.js에서, const 변수명 = new NativeEventEmitter(); 추가

    - app.js -> App() 함수 내에 위에 작성한 변수명.addListener('이벤트명', (event) => { //코드작성 });

       * 이벤트명 앞에 '' 추가 해야 함.

      을 추가한다. '이벤트명' 은 안드로이드 네이티브 코드에서 작성하게 된다. 

 

3. 안드로이드 네이티브에서 React-native로 이벤트 전달 (2. 안드로이드 네이티브 작업)
    - 1. 에서 작성한 클래스에서, 아래 코드 추가

    - 이벤트명은 2. 에서 작성한 이벤트명과 일치해야 한다

private static ReactApplicationContext reactContext;

....

//params 설명은 아래에 기술
reactContext.getJSModule(DeviceEventManagerModule.RCTDeviceEventEmitter.class).emit(이벤트명, params);

  - params 관련
     - WritableMap 클래스의 변수임. 

WritableMap params = Arguments.createMap();
params.putString(문자열 키값, 문자열 value값);