【React Native】objcと連携してみる

SocialFrameworkを使ってFacebook連携しようと思ったのですが、現時点(2015/04)ではFacebookSDKを使った方法はあってもSocialFrameworkを使ったものは見当たらなかった(普通使わないものなのかな？？)。

ということで、ReactNativeの公式ページの**Native Modules (iOS)**をもとに、objc側にSocialFrameworkを使った投稿処理を書くことでやってみたらできたのでメモ。

objc側の実装

まずSocialFrameworkをリンク付けする。

次にFacebookManagerというクラスを新規に作成する。こちらに投稿自体の処理と、js側へのcallbackを実行する処理を書く。

FacebookManager.h

# import "RCTBridgeModule.h"
# import "RCTLog.h"

@interface FacebookManager : NSObject<RCTBridgeModule>

@end

FacebookManager.m

# import "FacebookManager.h"
# import <Social/Social.h>

@implementation FacebookManager

RCT_EXPORT_MODULE();

RCT_EXPORT_METHOD(post:(RCTResponseSenderBlock)callback)
{
  if ([SLComposeViewController isAvailableForServiceType:SLServiceTypeTwitter]) {
    NSString *serviceType = SLServiceTypeFacebook;
    SLComposeViewController *composeCtl = [SLComposeViewController composeViewControllerForServiceType:serviceType];
    [composeCtl setCompletionHandler:^(SLComposeViewControllerResult result) {
      if (result == SLComposeViewControllerResultDone) {
        //投稿成功時
        callback(@[@"投稿しました"]);
      }
    }];
    
    [[self getTopViewController] presentViewController:composeCtl animated:YES completion:nil];
  }
}

- (UIViewController *)getTopViewController
{
  //省略
}

ポイントは、

• RCTBridgeModuleプロトコルを適用する
• RCT_EXPORT_MODULE(hoge:(RCTResponseSenderBlock)callback)でjs側からhogeメソッドを呼ぶことができるようになる。またjs側にcallbackで処理を返すことができる

js側の実装(ポイント部分のみ)

hoge.js

var FacebookManager = require('NativeModules').FacebookManager;

//-------------------------

  //投稿ボタン押下時の処理
  FacebookManager.post(function(e) {
    AlertIOS.alert(e)
  })

これでFacebook投稿できました。

まとめ

簡単な例ではあるけどれ、objcとわりかし簡単に連携できるのかなという印象。複雑なことやろうと思ったときにハマったりするのかな。
以下一応メモ。

• ReactNativeの公式ページによると、swiftはまだ対応していないようです
• 上のコードで動かないときはnpm updateでreact-nativeモジュールを最新にすること。自分はReactNativeしばらく触ってなかったためRCT_EXPORT_MODULE()あたりでエラーでました。