#네이티브 모듈에 함수 추가하기(React-Native)

개발이야기

#네이티브 모듈에 함수 추가하기(React-Native)

Kim-D 2020. 11. 9. 15:34

React-Native 앱 개발 중에 네이티브 모듈에 함수를 추가 했던 부분을 정리

1. iOS (Objective-C)

A. RCT_EXPORT_METHOD 키워드를 사용하여 사용할 메소드 정의( .m file)

@interface LibClassName()

@property (nonatomic, strong) RCTResponseSenderBlock callback;
// RCTResponseSenderBlock 는 RCTBridgeModule.h 에 선언 되어 있음.
// typedef void (^RCTResponseSenderBlock)(NSArray *response);

@end

@implementation LibClassName
RCT_EXPORT_MODULE();

RCT_EXPORT_METHOD(getNativeData:(RCTResponseSenderBlock)callback) {
// React-Native 에서 사용 할 데이터 처리
callback(@[[NSString stringWithFormat:@"React-Native 의 javascript 로 넘길 스트링 형식 데이터"]]);
// NSArray 에 NSString 타입의 데이터 3개를 Add 후 전달 시 React-Native 에서 index 0 값 데이터만 전달 되었음.
// 참고로 직렬화된 JSON 형식 데이터를 받을 수 있다고 하는데, [NSJSONSerialization dataWithJSONObject:
// options: error:] 값을 index 0 에 Add 후 전달 하면 javascript 에서 null 로 넘어온다.
// 2021.04 추가 NSDictionary 로 전달 하면 JSON 형식의 객체가 전달 된다.
}

@end

B. React-Native 에서 네이티브 모듈에 추가 한 함수 호출( .js file )

import { NativeModules } from 'react-native'

const { LibClassName } = NativeModules;

executeNativeData() {
LibClassName.getNativeData(nativeData => {
// 전달 받은 nativeData 를 상황에 맞게 처리
executeLogicFun(처리 된 nativeData);
});
}

2. android (JAVA)

A. @ReactMethod 를 사용하여 사용할 메소드 정의( .java file )

import com.facebook.react.bridge.ReactApplicationContext;
import com.facebook.react.bridge.ReactContextBaseJavaModule;
import com.facebook.react.bridge.ReactMethod;
import com.facebook.react.bridge.Callback;

import com.facebook.react.bridge.WritableMap;
import com.facebook.react.bridge.WritableNativeMap;

public class LibClassName extends ReactContextBaseJavaModule {
public LibClassName(ReactApplicationContext reactContext) {
super( reactContext );
}

@ReactMethod
public void getNativeData(Callback callback) {
// WritableMap, WritableNativeMap 을 이용하면 객체로 전달 가능
WritbleMap retData = new WritableNativeMap();
retData.putString("key", "value");
callback.invoke(retData);
}
}