サードパーティの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 />
);
}
});