react-native-fbsdkをインストール&リンクしてFacebookログインボタンを設置してみましたが、クリックしても何も起こらない。
chromeのデバッグコンソールには赤い文字で以下のwarningが出力されていました。
Warning: Native component for "RCTFBLikeView" does not exist
Warning: Native component for "RCTFBLoginButton" does not exist
Warning: Native component for "RCTFBSendButton" does not exist
Warning: Native component for "RCTFBShareButton" does not exist
あらためて公式ページを見てみると、以下の記述を発見.
The react-native-fbsdk has been linked by rnpm, the next step will be downloading and linking the native Facebook SDK for iOS. Make sure you have the latest Xcode installed. Open the .xcodeproj in Xcode found in the ios subfolder from your project's root directory. Now, follow all the steps in the Getting Started Guide for Facebook SDK for iOS. Along with FBSDKCoreKit.framework, don't forget to import FBSDKShareKit.framework and FBSDKLoginKit.framework into your Xcode project.
なるほどインストール&リンクだけじゃ不十分で、そもそもiosのネイティブのframeworkをxcodeプロジェクトに追加しておく必要があるのか。
書かれているように以下の3つのフレームワークを追加して再度トライ。
- FBSDKCoreKit.framework
- FBSDKShareKit.framework
- FBSDKLoginKit.framework
react-native run-iosでコケる。
framework not found Bolts for architecture x86_64
stackoverflowに解決方法がありました。
ダウンロードしたFacebookSDKのフォルダに含まれるBolts.frameworkも追加する必要がある。
再度react-native run-iosするも今度は起動時クラッシュする状況。
結局ネイティブの知識は必要なのねとか思いつつxcodeから直接デバッグ実行しログを確認する。
*** Terminating app due to uncaught exception 'InvalidOperationException', reason: 'fbauth2 is missing from your Info.plist under LSApplicationQueriesSchemes and is required for iOS 9.0'
ぐぐって こちらを参考に,Info.plistを修正する。
LSApplicationQueriesSchemesにfbauth2を指定してみました。
ちなみに LSApplicationQueriesSchemesはcanOpenURLでURLスキーマが開けるかテストして良いURLスキーマを指定するみたいです。(説明はこちら)
しかし起動時クラッシュは治らない。
こんどは次のようなエラー
*** Terminating app due to uncaught exception 'NSInvalidArgumentException', reason: '-[NSTaggedPointerString containsObject:]: unrecognized selector sent to instance 0xa326874756162667'
ぐぐってこのページにたどり着く。
なるほどさっきやったInfo.plistへの修正がちょっと違ってたみたい。
ただしくはLSApplicationQueriesSchemesはarrayで指定して、その要素にfbauth2を含めるという修正が良さそう。
というわけで以下のような設定にInfo.plistを書き換えました。
<key>LSApplicationQueriesSchemes</key>
<array>
<string>fbapi</string>
<string>fb-messenger-api</string>
<string>fbauth2</string>
<string>fbshareextension</string>
</array>
気を取り直してreact-native run-iosを実行。
するとどうでしょう、今まで赤い枠線でしかなかったLoginButtonがFacebookのログインボタンとなって表示されました。やったね！
早速タップしてみる。
うん、なんとなく予想してたけどクラッシュしました。
しかし段々慣れてきたNativeからは逃げられないと腹をくくり、xcodeでログを見るよ。
*** Terminating app due to uncaught exception 'InvalidOperationException', reason: 'App ID not found. Add a string value with your app ID for the key FacebookAppID to the Info.plist or call [FBSDKSettings setAppID:].'
ああ、FacebookのappIdを指定しろといってる。できるだけNativeのコードはいじらないようにするために、Info.plistに追記しました。
再度トライ、またクラッシュ。どんとこい。
*** Terminating app due to uncaught exception 'InvalidOperationException', reason: 'fbアプリID is not registered as a URL scheme. Please add it in your Info.plist'
ああ、ログイン後にアプリに戻るためのURLスキーマを設定しろと言われている。
xcodeでURLスキーマを追加する。
ここまでやってなんとなくわかったけど、react-native installとかreact-native-fbsdkインストールしても、ネイティブらへんの作業は別途やる必要がある。
というわけで基本に立ち返って、ネイティブのFacebookSDKの初期設定など諸々やった。
その結果やっとこさ、ReactNativeでFacebookログインできたとさ！
色々勉強になった。