【React Native】react-native-fbsdk 導入(ios)

やりたいこと

react nativeでfacebookログインを行う。
下記を利用。
https://github.com/facebook/react-native-fbsdk

手順

1.react-native-fbsdkのインストールとリンク

react-native install react-native-fbsdk

2.iOS用Facebook SDKスタートガイド

下記の「iOS用クイックスタート」にしたがって設定ファイルを編集する
https://developers.facebook.com/docs/ios/getting-started/
　-

！！手順以外の修正①！！

＊どこに置くかのが最適か不明
sdkの保存場所をプロジェクト内のios配下にframeworksディレクトリ作成して、その中にframeworkを配置
アプリケーションのXcodeプロジェクトを開きます。
プロジェクトに[Frameworks]グループがない場合は作成します。
Finderで~/Documents/FacebookSDKを開きます。
Bolts.framework、FBSDKCoreKit.framework、FBSDKLoginKit.framework、FBSDKShareKit.frameworkファイルをドラッグして、XcodeのProject Navigatorの[Frameworks]グループにドロップします。メッセージが表示されたら、[Copy Items if needed]を選択して続行します。

！！手順以外の修正②！！

アプリのインストールとアプリの開くをトラッキング

手順に従うと、下記のソースをAppDelegate.mに追加する。
しかし、下記のエラーが表示される。
どうやら、「UIApplication」を重複して定義しているのが悪いようです。
そのため、「手順通りの追加ソース」を追加せずに下記の「手順以外の追加ソース」を追加した。

＞エラー

Duplicate declaration of method 'application:didFinishLaunchingWithOptions:'

＞手順通りの追加ソース

- (void)applicationDidBecomeActive:(UIApplication *)application {
  [FBSDKAppEvents activateApp];
}

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
  [[FBSDKApplicationDelegate sharedInstance] application:application
                           didFinishLaunchingWithOptions:launchOptions];
  return YES;
}

- (BOOL)application:(UIApplication *)application
            openURL:(NSURL *)url
  sourceApplication:(NSString *)sourceApplication
         annotation:(id)annotation {
  return [[FBSDKApplicationDelegate sharedInstance] application:application
                                                         openURL:url
                                               sourceApplication:sourceApplication
                                                      annotation:annotation];
}

＞手順以外の追加ソース

- (BOOL)application:(UIApplication *)application
            openURL:(NSURL *)url
  sourceApplication:(NSString *)sourceApplication
         annotation:(id)annotation {
  return [[FBSDKApplicationDelegate sharedInstance] application:application
                                                        openURL:url
                                              sourceApplication:sourceApplication
                                                     annotation:annotation];
}

- (void)applicationDidBecomeActive:(UIApplication *)application {
  [FBSDKAppEvents activateApp];
}

！！手順以外の修正③！！

統合を試そう

手順では「アプリのViewController.mファイルのいずれかに、以下を追加します」とあるが、
ViewController.mファイルがない。
そのため、ViewController.mをxcodeから作成した。
作成したViewController.mに手順通りに必要なソースを追加する。

使用方法

js側でインポート方法を下記で行う。
＊好みなので、手順通りに行って問題ない。

import React, { Component } from 'react';
import Modal from 'react-native-modalbox';
import { View } from 'react-native';
import FBSDK, { LoginButton, AccessToken } from 'react-native-fbsdk';

export default class Login extends Component {
  render() {
    return (
      <View>
        <LoginButton
          publishPermissions={["publish_actions"]}
          onLoginFinished={
            (error, result) => {
              if (error) {
                alert("login has error: " + result.error);
              } else if (result.isCancelled) {
                alert("login is cancelled.");
              } else {
                AccessToken.getCurrentAccessToken().then(
                  (data) => {
                    alert(data.accessToken.toString())
                  }
                )
              }
            }
          }
          onLogoutFinished={() => alert("logout.")}/>
      </View>
    );
  }
}