[ React Native ] android module example 적용

회사에서 안드로이드만 사용가능한 기능을 만들어야했다. npm을 찾아보니, 해당기능을 제공하는 라이브러리가 없어서

 

직접 모듈을 구현하기로했다.

 

일단, java 로 해당 모듈을 만들고, 구현하기위해 rn 메인 사이트에 들어가서 예제를 사용해보기로했다.

 

일단 최종 android/app/src/main/java/com/패키지 의 폴더트리는 해당과 같다.

 

CalendarModule.java

import com.facebook.react.bridge.NativeModule;

import com.facebook.react.bridge.ReactApplicationContext;

import com.facebook.react.bridge.ReactContext;

import com.facebook.react.bridge.ReactContextBaseJavaModule;

import com.facebook.react.bridge.ReactMethod;

import java.util.Map;

import android.util.Log;

import java.util.HashMap;

import android.widget.Toast;

public class CalendarModule extends ReactContextBaseJavaModule {

CalendarModule(ReactApplicationContext context) {

super(context);

}

@Override

public String getName() {

return "CalendarModule";

}

@ReactMethod

public void createCalendarEvent(String name, String location) {

Log.d("CalendarModule", "Create event called with name: " + name

+ " and location: " + location);

Toast.makeText(getReactApplicationContext(), "HELLO", Toast.LENGTH_SHORT).show();

}

}

MyAppPackage.java

 

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.ArrayList;

import java.util.Collections;

import java.util.List;

public class MyAppPackage implements ReactPackage {

@Override

public List<ViewManager> createViewManagers(ReactApplicationContext reactContext) {

return Collections.emptyList();

}

@Override

public List<NativeModule> createNativeModules(

ReactApplicationContext reactContext) {

List<NativeModule> modules = new ArrayList<>();

modules.add(new CalendarModule(reactContext));

return modules;

}

}

위 java 파일 최상단에 package 패키지 이름 이 들어가야한다.

 

추후

 

MainApplication.java

해당 package 를 import 해준다.

 

이제 안드로이드 세팅은 끝났고,

 

테스트를 위해 javascript 로 작성하는 부분에서

const {CalendarModule} = NativeModules;

const test = () => {

CalendarModule.createCalendarEvent('testName', 'testLocation');

};

로 작성해주고, test를 실행하면 Logcat에서도 잘보이고, Toast도 잘 뜬다.

 

이제 연결은 되었으니, 필요 모듈을 작성해보면 되겠다!