[번역] React Native에서 Native UI Component를 사용해보자（iOS편）

서드파티의 네이티브용 SDK로 만든 컴포넌트를 React Native 에서 사용하고 싶어서 조사해봤습니다.  공식은 영어를 읽을 수 있다고 해도 설명이 부족하거나 쓸데없는 내용이 많아서 이해하기 힘들다고 생각했습니다.

저는 안드로이드 자바 초심자이기 때문에 나쁘게 생각하지 말아주세요.  프로퍼티 설정이나, 타 API 사용은이런저런 설정이 필요합니다.

Android편은 이쪽에서 볼수 있습니다.

공식 문서

https://facebook.github.io/react-native/docs/native-components-ios.html

가장 심플한 구현 코드

1. RCTViewManager를 계승한 헤더파일(.h)과 구현파일 (.m)을 작성합니다.。[XXXX]Manager라고 이름을 지어야 합니다.  XXXX가 JS에서 호출할 이름이됩니다.
2. 구현코드에서  RCT_EXPORT_MODULE() 를 호출합니다. 。view 메소드에서 Native 의 View를 반환합니다.
3. Manager클래스에서 지정한 이름을 사용해서 JavaScript에서 호출한다.

ExampleManager.h

#import <React/RCTViewManager.h>
#import <UIKit/UIKit.h>

@interface ExampleManager : RCTViewManager
@end

ExampleManager.m

#import "ExampleManager.h"

@implementation ExampleManager

// This line allows ReactNative to access this component from JS
RCT_EXPORT_MODULE();

- (UIView *)view
{
  return [[UIView alloc] init];
}
@end

App.js

import React from 'react';
import { requireNativeComponent } from 'react-native';

const Example = requireNativeComponent('Example', null);

export default class App extends React.Component {
  render() {
    return (
      <Example />
    );
  }
});