React NativeでNativeのUI Componentを使う（iOS編） #iOS

サードパーティのNative用SDKのコンポーネントをReactNativeで使いたかったので調べた。公式は英語を読めたとしても説明不足だったり、余計だったり分かりづらいと思う。
当方、Objective-C初心者ですので悪しからず。プロパティの設定や、他APIの使用はさらに色々設定が必要。
Android編はこちら。

公式ドキュメント

一番シンプルなコード例

RCTViewManagerを継承したヘッダーファイル（.h）と実装ファイル（.m）を作成。[XXXX]Managerと命名すること。XXXXがJSで呼び出される名前になる。
実装ファイルで RCT_EXPORT_MODULE() を呼び出し。viewメソッドでNativeのViewを返す。
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 />
    );
  }
});