Native ViewManager module에서 RN으로 event를 tag로 전송

HumbleMincho·2024년 7월 8일

현업기록소 태그가 있는 포스팅들은 내가 실제로 업무를 하며 팀 내 위키에 공유용으로 적은 글을 보안상 문제요소들을 수정하여 옮긴 포스팅이며, 회고 및 복습을 위함이니 참고부탁합니다.

RN에서 아래와 같이 커스텀 뷰에 이벱트를 전달 받았을 때 호출할 함수를 등록합니다.

<MyCustomView 
  style={{flex:1}}
  onPwdInputDone={this.doneInput}
/>

[Android]

  1. ViewManager 상속 클래스에 getExportedCustomDirectEventTypeConstants() 오버라이드 함수에 MapBuilder()로 전달받을 이벤트를 설정합니다.
public class SampleViewManager extends SimpleViewManager<RelativeLayout> {
    public static final String moduleName = "SampleView";
    @Nullable
    @Override
    public Map<String, Object> getExportedCustomDirectEventTypeConstants() {
        return MapBuilder.<String, Object>builder().put("onPwdInputDone", MapBuilder.of("registrationName", "onPwdInputDone")).build();
    }
  1. RCTEventEmitter를 통해서 이벤트를 전달합니다. 이때 인자는 WritableMap 으로 key, value 구성하여야 합니다.
WritableMap keypadEvent = Arguments.createMap();
keypadEvent.putString("inputData", plainData);
reactContext.getJSModule(RCTEventEmitter.class).receiveEvent(getId(), "onPwdInputDone", keypadEvent);

[iOS]

  1. RCTViewManager 상속 클래스에서 RCT_EXPORT_VIEW_PROPERTY([이벤트 이름], RCTBubblingEventBlock) 으로 이벤트 정의
@interface RNTSecKeypadManager : RCTViewManager
@end
@implementation RNTSecKeypadManager
RCT_EXPORT_MODULE(RNTSecKeypad);
RCT_EXPORT_VIEW_PROPERTY(onPwdInputDone, RCTBubblingEventBlock)
...
@end
  1. 이벤트를 전달할 부분에서 dictionary를 구성해서 이벤트를 호출합니다.
if (self.onPwdInputDone != NULL) {
      NSDictionary *dict = [NSDictionary dictionaryWithObjectsAndKeys:cipherString, @"inputData", nil];
      self.onPwdInputDone(dict);
     }
profile
최고의 효율을 창출하기 위해 겸손히 노력합니다.

0개의 댓글