React Native で Repro を利用

4843 ワード
Repro reactnative Objective-C Objective-C テキストリンク

概要

公式ドキュメントには ReactNative での使用例は無いが、 ReactNative でも Repro を問題無く使用できた。

公式ドキュメントの Objective-C 版のコードを貼り付け、 Bridge できるようにしておき、 あとは JavaScript 側から呼び出せば良い。

イベントも取れるし、録画もできる。

環境

  • React Native 0.52.0
  • Repro 2.10.0

Repro は Cocoapods を利用してインストールした。

やったこと

例として、マスキング機能をJSから利用できるようにする。

※ AppDelegate.m にて Repro SDK の設定はしているものとする。

下記のような Objective C のモジュールを作成して

Bridge.h
#import <React/RCTBridgeModule.h>

@interface Bridge : NSObject <RCTBridgeModule>
@end
Bridge.m
#import "Bridge.h"
#import <React/RCTLog.h>
#import <Repro/Repro.h>

@import Firebase;

@implementation Bridge

RCT_EXPORT_MODULE();

RCT_EXPORT_METHOD(maskReproMovie)
{
  CGFloat width = [UIScreen mainScreen].bounds.size.width;
  CGFloat height = [UIScreen mainScreen].bounds.size.height;
  [Repro maskWithRect:CGRectMake(0, 0, width, height) key:@"private"];
}

RCT_EXPORT_METHOD(unmaskReproMovie)
{
  [Repro unmaskForKey:@"private"];
}

@end

画面サイズを取得してマスクしている。

あとはJS側で

import { NativeModules } from 'react-native'

export const unmaskReproMovie = () => {
  if (__DEV__) {
    console.log('[Repro] Unmask Repro Movie')
  }
  NativeModules.Bridge.unmaskReproMovie()
}

みたいにしてあげればOK。

ただし、ネイティブのように要素を指定してマスキングの方法がわからなかったので（そもそも、JSの仮想DOMに対して指定することができるのか・・・？）、画面全体をマスキングした。

所感

初めてReproを使ったが、最高である。

  • 導入までの手順が、今自分が何をしなければ良いのかが、非常に分かりやすい。
  • SDKの導入、使用方法が分かりやすい。ドキュメントが良い。
  • 管理画面のUIが非常に使いやすい。参考にしたい。
go言語トラップの11:配列を関数パラメータとする
c言語プログラミング三子棋(井字棋)