React Native Facebook公式サンプルソースをビルド、実行するまで #Xcode

#はじめに
React Native開発にあたり、Facebook公式サンプルソース F8APP を実行できるまでの手順を書いてみました。習得の近道は公式サンプルソースを解読するのが一番と思ってます。

#Facebook公式サンプルソース F8APPについて
Building the F8 App
http://makeitopen.com

Github
https://github.com/fbsamples/f8app

Google Play
https://play.google.com/store/apps/details?id=com.facebook.f8

AppStore
https://itunes.apple.com/jp/app/f8/id853467066?mt=8

#投稿者の開発環境

Mac OS High Sierra v10.13.3
node v9.4.0
yarn v1.5.1
npm v5.7.1
Docker v17.12.0-ce
Xcode v9.2
Android Studio v3.0.1
create-react-native-app v1.0.0
FacebookSDKs-iOS-4.31.1
Watchman v4.9.0
JDK v1.8.0_71

※各環境の構築手順は、省略

#FACEBOOK SDK導入、F8APPダウンロード
公式SDKをダウンロード
ダウンロードURL
https://developers.facebook.com/docs/ios/getting-started?locale=ja_JP

ドキュメントフォルダにSDK配置
ダウンロードしたSDKを解凍後、Macの「~/Documents/FacebookSDK」フォルダに配置する。

公式サンプルソースをダウンロード

$git clone https://github.com/fbsamples/f8app.git

パッケージ管理開始

$cd f8app/
$yarn

#Android　ビルド、エミュレーター実行
Android Studio３．０１で、androidフォルダを開くと、ビルドエラーとなる。

ビルドグレードルのSDKバージョンを以下の様に変更する。

build.gradleの設定
Android Studioの導入バージョンによっては、多少異なりますが、SDKは２６.0.2以上を指定すれば大丈夫と思います。

パス	ファイル名
build.gradle (Module: App)	compileSdkVersion 26 buildToolsVersion '26.0.2' compile "com.android.support:appcompat-v7:26.0.2"
build.gradle (Module: react-native-fbsdk)	compileSdkVersion 26 buildToolsVersion '26.0.2' compile "com.android.support:appcompat-v7:26.0.2"
build.gradle (Module: react-native-linear-gradient)	compileSdkVersion 26 buildToolsVersion '26.0.2'
build.gradle (Module: react-native-video-player)	compileSdkVersion 26 buildToolsVersion '26.0.2' compile "com.android.support:appcompat-v7:26.0.2"
build.gradle (Module: react-native-photo-view)	compileSdkVersion 26 buildToolsVersion '26.0.2'
build.gradle (Module: react-native-push-notification)	compileSdkVersion 26 buildToolsVersion '26.0.2' compile "com.android.support:appcompat-v7:26.0.2"

エミュレーターで動作確認
F8APPに付属のローカルサーバを起動する（既に起動済みの場合は不要）。

$yarn server

エミュレーターを起動し、正常に動作することを確認する。

$yarn android

エミュレーター実行は、yarn androidコマンドで行う。
このコマンドでAndroid向けに、ビルド等が正確に行われる。
Android Studio上からのエミュレーター実行だと、うまくいかない。

#iOS ビルド、エミュレーター実行
Bundle Identifilerとプロビジョニングファイルを別途準備しておく。
XCODE側設定
　　XCODEでf8appのiosフォルダを開きます。
　　XCODE->General->Identify->Bundle Identifilerを設定する。
　　XCODE->General->Signing->Provisioning Profileを設定する。
　　XCODE->Build Settings->Framework Search PathsにFacebook SDKのパスを設定する。
　　　　「~/Documents/FacebookSDK」

エミュレーターで動作確認
F8APPに付属のDockerのAPサーバを起動する（既に起動済みの場合は不要）。
Dockerの環境が必要です。

$yarn server

エミュレーターを起動し、動作することを確認する。

$yarn ios

XCODEが起動するため、クリーン、ビルドを行う。
正常にビルド後、エミュレーターを指定して実行する。

エミュレーター実行時にbasisフォントがない旨のエラー画面表示になる事象が発生した場合、jsファイルの「basis」フォントの箇所を「helvetica」に修正する。
必ず発生する訳ではなく、当手順の検証で、２回目の時は発生しなかった。

| パス | ファイル名 |
|:-----------|:------------|
| js/filter | Topicitem.js |
| js/tabs/demos | DemosCaruosel.js|
| js/tabs | F8TabsView.js |
| js/tabs/schedule | F8SessionDetails.js（２箇所） |
| js/tabs/schedule | GeneralScheduleView.js |
| js/tabs/schedule | SessionsCarousel.js |

XCODEでビルド時に、RNVideoPlayerプロジェクトのSearch pathに、AppDelegate.hが参照できないエラーが発生した場合、header search pathの追加を行う。
必ず発生する訳ではなく、当手順の検証で、１回目の時は発生しなかった。

#Android、iOS実機で検証する
エミュレーターでなく、実機検証する場合、APサーバ接続先をlocalhostからローカルIPアドレスに変更する。
またF8APPは、Facebookログインを行っており、実行にはFacebook開発用のアプリIDが、必要です。
Facebook開発サイトに、アプリ情報を登録し、アプリIDを入手し、env.jsファイルに設定を行う。
DockerのAPサーバを停止
　　ターミナルで起動中の場合、CTRL＋Cで停止する。

jsファイルのローカルサーバのIPアドレス変更
　　f8app/env.jsファイルのserverURLとgraphqlURLのlocalhostをローカルIPアドレスに変更する。
　　＜変更前＞
　　serverURL: "http://localhost:1337",
　　graphqlURL: "http://localhost:4000/graphql",
　　＜変更後＞
　　serverURL: "http://ローカルIPアドレス:1337",
　　graphqlURL: "http://ローカルIPアドレス:4000/graphql",

FACEBOOK開発用のアプリIDを取得
　　FACEBOOKログインを利用する場合、Facebookアプリ開発用のアプリIDが必要です。
　　開発者サイトでAndroidアプリをウイザードに従い登録し、取得する。

　　Facebook開発サイト
　　https://developers.facebook.com/docs/apps/register?locale=ja_JP

　　登録に必要な証明書キーは、keytookコマンドで作成する。
　　下記のコマンドを打つと、２８文字のキーがコンソールに表示される。
　　この値をFACEBOOKのアプリIDのキーハッシュに登録する。
　
　　$keytool -exportcert -alias androiddebugkey -keystore ~/.android/debug.keystore | openssl sha1 -binary | openssl base64

　　取得したアプリIDをapp/res/values/strings.xmlに元からある値を上書する形で登録する。
　　なおファイルはリリース用、デバック用の２ファイルあるので、各々で設定する

<resources>
<string name="app_name">F8</string>
<string name="facebook_app_id">アプリID</string>
</resources>

DockerのAPサーバ起動

$yarn server

実機確認
　　アプリを実機に転送し、実機動作を確認する。
　　初回起動時には、他のアプリに重ねて描画する設定画面が表示されるため、有効化する。
　　有効化した後で、再実行するとアプリが正常に起動表示されます。

アプリ起動後、SKIP FOR NOWで動作を確認してください。

「CONTINUE WITH FACEBOOK」ボタンのFacebookログインは、実機ではうまくいかない事があります。
多分、FacebookのアプリIDとの兼ね合いと思いますが、分かる方、いたら教えてくださると助かります。