【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に手順通りに必要なソースを追加する。
![スクリーンショット 2018-01-26 21.23.50.png](https://qiita-image-store.s3.amazonaws.com/0/170662/69dcf2cf-8d59-62aa-7c69-1dc7ae7203dd.png)
![スクリーンショット 2018-01-26 21.24.13.png](https://qiita-image-store.s3.amazonaws.com/0/170662/2bff4da5-cab4-d2d0-1f82-ca8704ad76dc.png)


## 使用方法
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>
    );
  }
}

```