React Native Facebook公式サンプル(f8app)を動かしてみる

ReactNative
Table of Contents

環境

Mac OS High Sierra v10.13.6
node v10.9.0
yarn v1.9.4
npm v6.2.0
Docker vDocker version 18.06.1-ce
Xcode v9.2
Android Studio v3.1.2
JDK 1.8.0_131

yarnをインストール

  • グローバルにインストール
    npm install -g yarn

Docker for mac をインストール

  • https://docs.docker.com/docker-for-mac/install/
  • Mac版 Docker Toolboxをインストールして使っている人は、Docker Toolboxでvirtualboxでdokcerホスト作っても動くと思うが、MacのHyperKitで動くDocker for macを利用

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

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

iOS用のSDKをダウンロード

  • https://developers.facebook.com/docs/ios/getting-started?locale=ja_JP
  • 解凍してmacの「~/Documents/FacebookSDK」へ移動　※サンプルソースではBuild Setting -> SearchPath -> Framework Search Path が「~/Documents/FacebookSDK」になってる

yarnでpackage.jsonに記載してあるモジュールをインストール

cd f8app/

yarn

Parseサーバーの起動

  • graphqlも含まれていて、何につかっているのよくわからない

yarn server

Parseサーバーの確認

  • http://localhost:4040/login
    • Username : admin
    • Password : admin

    • 一度ログインしてみよう。iOSを起動したときログインして、「DEV」ボタンを押さないと動かなかった。

  • http://localhost:4000/graphql
    localhost

Androidの起動

  • あらかじめandroidのエミュレーターを起動する。iOSはコマンドを実行するとシュミレーターが起動するけど、androidは起動しておかないダメみたい。
    yarn android

  • たぶん動かない

Androidの環境を最新にしてみた

  • compileSdkVersion、buildToolsVersion、targetSdkVersionが古い状態なのが問題？インストールされていないバージョンが指定されていたり、bulid.gradleの書式の昔風なので修正

  • /Users/ka-yamao/workspace/f8app/android/app/build.gradle

android {
    compileSdkVersion 26
    buildToolsVersion '27.0.3'

    defaultConfig {
        applicationId "com.facebook.f8"
        minSdkVersion 16
        targetSdkVersion 26

・
・
・

compile　
↓　compileは非推奨なので置換
implementation


com.google.android.gms:play-services-gcm:10.0.1
↓ 新しいバージョンへ変更
com.google.android.gms:play-services-gcm:15.0.1
  • /Users/ka-yamao/workspace/f8app/android/build.gradle
classpath 'com.android.tools.build:gradle:3.0.1'
↓ gradleのプラグインもバージョンアップ
classpath 'com.android.tools.build:gradle:3.1.2'
  • /Users/ka-yamao/workspace/f8app/android/gradle/wrapper/gradle-wrapper.properties
distributionUrl=https\://services.gradle.org/distributions/gradle-4.2-all.zip
↓
distributionUrl=https\://services.gradle.org/distributions/gradle-4.4-all.zip

Androidをもう一度起動してみる

  • 起動するとこんな画面が出てくる。スイッチをオンにする。

  • 一度アプリを終了して再起動すると、起動すると思う

iOSの起動

yarn ios

  • 特に問題なく起動できる

Facebookログイン

  • ios、androidでアプリIDを設定して、ログインを試みた。ログインができてるようだが、そのあとParseサーバーとの接続でエラーになってる。いったん保留で後日調査
  • ログインしない状態で「SKIP FOR NOW」を押下してアプリの動作を確認をする。