Objective-C
iOS
React
reactnative

React NativeでNativeのUI Componentを使う(iOS編)

More than 1 year has passed since last update.

サードパーティのNative用SDKのコンポーネントをReactNativeで使いたかったので調べた。公式は英語を読めたとしても説明不足だったり、余計だったり分かりづらいと思う。
当方、Objective-C初心者ですので悪しからず。プロパティの設定や、他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 />
    );
  }
});