4
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

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

Last updated at Posted at 2017-10-11

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

公式ドキュメント

一番シンプルなコード例

  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 />
    );
  }
});
4
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
4
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?