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값);
'React-Native' 카테고리의 다른 글
각종 오류 관련 공식페이지 링크 (0) | 2022.06.13 |
---|---|
Mac에서 터미널을 열때마다 할일 및 react-native 앱 실행 (0) | 2022.06.07 |