• ..

TypeScript

    Expo を使った環境構築

    expo コマンドを開発マシンにインストール

    コマンドのインストールは以下でできます。

    yarn global add expo-cli

    expoコマンドが使えるようになりました。では、そのinitコマンドを実行します。テーマはとりあえずworkingテキストだけが表示されるblankでいいと思います。

    ~/test expo init <PROJECT_NAME>
    ? Choose a template: (Use arrow keys)
    ❯ blank
      minimum dependencies to run and an empty root component
      tabs
      several example screens and tabs using react-navigation

    依存のインストールなどもすべて終わったらPROJECT_NAMEへ移動し、yarn startしましょう。

    このようなページが開けば開発マシン側は完了です。

    expo アプリをスマホ端末にもインストール

    これはそれぞれ以下から入れておきます。

    入れれたら、開発マシンのQRコードをスマホで読み込みます。

    開くとビルドがはじまるのでしばらく待ちます。そして以下の画面になったらスマホ端末側も環境構築完了です。

    リモートサーバーを使って環境構築

    例えば EC2 などでexpo startしてそこに接続して見たい場合です。これには--tunnelオプションフラグを使います。

    yarn start --tunnel
    # expo start --tunnel

    すると、exp://nt-hdb.anonymous.<dir-name>.exp.direct:80というような URI が発行されるのでローカルからそこにアクセスするだけです。

    エラーまとめ

    This version of the Expo app is out of date. Uninstall the app and run again to upgrade.

    問題

    ターミナルに

    This version of the Expo app is out of date. Uninstall the app and run again to upgrade.

    とでて開発マシンで見れなくなりました。

    • IOS端末のシミュレーターのexpo起動時に発生
    • スマホではちゃんと見れている
    • expoコマンドが古いのかと思い、expo-cliを入れ直したが直らない

    解決

    • シミュレーターメニューの Hardware > Device > iOS [最新バージョン] から今開いているのとは別の端末を起動
    • さっきまで開いていた方は閉じる
    • localhostページから再度「Run on iOS simulator」する

    うまくいくとログに

    Downloading latest version of Expo

    と出てちゃんと表示されるはずです。