Native Module/React-Native

Jivyy·2021년 9월 2일

Intro

바코드 리더기가 내장되어 있는 안드로이드 기기의 바코드 기능을 react-native 로 구현한 앱에서 구동시키기 위해서는 java로 작성된 코드에 엑세스 해야 했고, 이를 구현하기 위해서 native-module을 적용하게 되었다. java의 문외한인 상태에서 우리 앱에 적합하도록 코드수정도 해야 해서 많은 시행착오를 겪었다.
네이티브 모듈을 작성하는 방법은 공식 문서에도 나와 있으니 생략하고 자바에 대해 무지한 프론트엔드 개발자로서 이해한 내용들을 기록해 본다.

바코드 리딩 기능을 넣은 앱이 단독으로는 잘 작동하였으나, 한 device 에서 바코드 리딩 기능이 있는 두 버전을 함께 사용하면서 새 버전의 앱에서 문제가 발생했다.

original Ver App : Native
new Ver App : React Native

TroubleShooting

bug_1

new App이 background 에 있는 상태에서 original App에서 바코드를 리딩하면 new App에서도 읽히는 문제

try & catch 😊

react native 에서 제공하는 AppState API를 사용해서 Appstate가 background 가 되는 경우 eventListner를 삭제하는 방법을 사용했더니 해결되었으나, activity 생명주기를 이용해 더 간단히 해결 할 수 있었다.
bug_2

간혹 original App 을 한참 사용하다가 다시 New App으로 돌아오면 바코드리딩이 되지 않는 문제

try 😂

이 역시 처음에는 네이티브 코드 상에 @ReactMethod 로 barcode 를 on 하는 openBarcode 라는 함수를 만들어두고 AppState가 다시 foreground에 돌아오는 경우 openBarcode함수를 호출하는 방식을 시도했으나 역시 에러가 완전히 잡히지는 않았다.

catch😊

아래의 생명주기 activity 을 통해 해결했다.

Android의 LifeCycle & Activity

앱을 시작하고, 앱에서 나가고, 앱으로 다시 돌아오는 동작을 감지하여 콜백을 구현하므로서 앱의 비정상적인 문제를 예방할 수 있다.

Application의 LifeCycle

OnCreate()

도식표에서 볼 수 있듯 앱이 구동되면 activity가 처음으로 생성될때 먼저 onCreate() 메소드가 호출된다. 여기서 셋업으로서 뷰를 그리거나 데이터를 바인딩하거나 하는 작업들을 한다.
onPause()

액티비티가 foreground 상태에서 벗어나서 background에 있을 때.
onResume()

다시 focus가 되었을 때.
onDestory()

앱이 background에서도 완전히 사라지고 Activity 가 삭제될 때

onStart(), onStop() 등도 있으나 페이스북에서 제공하는 lifeCycleEventListner 에는 지원되지 않는다. 생명주기 액티비티 메소드들을 사용해서 원하는 작업을 할 수 있어 onHostPause()에서는 바코드를 off 하고 onHostResume에서 다시 바코드를 on 해주니 원하는 기능이 잘 동작하였다.

  import com.facebook.react.bridge.LifecycleEventListener;

  reactContext.addLifecycleEventListener(this);
  //모듈에 리스너를 등록해준다.


  @Override
  public void onHostResume() {
     // Activity `onResume`
     //on barcode function
  }
  @Override
  public void onHostPause() {
     // Activity `onPause`
    // off barcode function
  }
  @Override
  public void onHostDestroy() {
     // Activity `onDestroy`
  }