ExpoでReactNative appを起動してみる。
- 前回は、環境構築まで行ったがアプリをロード（起動）できなかった。
- 今回は、アプリのロードまでに行ったことをチェックリスト形式にして、Expoで作成したアプリの起動手順を書いていく。
- Android実機とエミュレータでアプリを起動する手順になる。（ただ、チェックリストはプラットフォーム関係なく使えると思う。）
- Expoを使う理由はReact Nativeの公式ドキュメントのQuick StartがExpo前提で書かれていたから。
Requirments
- Node+Expo環境の構築（前回の記事）
What you will learn
Let's start
1. まずExpoプロジェクトを作成
前回は適当に作成したので、Expoのドキュメントに従って作成してみる
1-1. Creating the project
- プロジェクト名を指定してプロジェクトを作成する(指定したプロジェクト名のディレクトリがカレントに作成される)
expo init {project name}
- 次に色々と聞かれる。ここではドキュメントに従ってtemplateは
tabsを選択 - 選択後、Expo CLIがプロジェクトを作成し始める。その際に
react,react-native,expoもインストールしてくれる。 - 今回作成したプロジェクト
- template : tabs
- workflow : managed
- name": first-app
- slug : first-app
まず、template選択
shouhei-ubuntu% expo init ? Choose a template: blank minimum dependencies to run and an empty root component ❯ tabs several example screens and tabs using react-navigation
次に、workflowを選択
? Choose a template: expo-template-tabs ? Choose which workflow to use: ❯ managed (default) Build your app with JavaScript with Expo APIs. advanced (experimental 🚧) Build your app with JavaScript with Expo APIs and custom native modules.
最後に、アプリのnameとslugを入力
shouhei-ubuntu% expo init
? Choose a template: expo-template-tabs
? Choose which workflow to use: managed
? Please enter a few initial configuration values.
Read more: https://docs.expo.io/versions/latest/workflow/configuration ‣ 100% completed
{
"expo": {
"name": "first-app",
"slug": "first-app"
}
}
1-2. Confirm npm modules in current directory
- インストール後、一応確認
- webpackはインストールしたらERR消えたが、古いreact, react-nativeへの依存は放置した。
shouhei-ubuntu% npm list --depth=0 /home/shouhei/Documents/ReactNative/first-app ├── @expo/samples@2.1.1 ├── babel-preset-expo@5.0.0 ├── expo@32.0.3 ├── jest-expo@32.0.0 ├── mkdirp@0.5.1 ├── react@16.5.0 ├── react-native@0.57.1 └── react-navigation@3.1.2 npm ERR! peer dep missing: react-native@^0.55.4, required by expo-google-sign-in@2.0.0 npm ERR! peer dep missing: react-native@^0.44.1, required by react-native-reanimated@1.0.0-alpha.11 npm ERR! peer dep missing: react@16.0.0-alpha.6, required by react-native-reanimated@1.0.0-alpha.11 npm ERR! peer dep missing: webpack@^3.0.0 || ^4.0.0, required by url-loader@1.1.2
2. Start the development server
cd {プロジェクトディレクトリ}
npm start
Metro BundlerというJSをBabelでコンパイルしてくれるwebサーバーが起動するらしい（各キーワードの意味わかってない）
Expo CLI starts Metro Bundler, which is an HTTP server that compiles the JavaScript code of our app using Babel and serves it to the Expo app. It also pops up Expo Dev Tools, a control panel for developing your app, in your default web browser.
3. Open the app on your phone or simulator (For Android)
- ここが前回詰まったところ。
- 以下、起動成功までに確認とやってみたことリスト
3-1. 起動する前のチェックリスト
| No. | 項目 | 実機 | エミュレータ |
|---|---|---|---|
| 1 | 接続ネットワーク確認 | 必要 | 不要 |
| 2 | Expoアカウント作成し、Expo CLIとExpo moile appにログイン | 不要 | 不要 |
| 3 | Expo moile appインストール | 必要（PlayStoreから手動でインストール） | 必要（ロード時に自動でインストールされる） |
| 4 | adbコマンドなどパスを通す | 不要 | 必要 |
| 5 | root権限で起動してみる | 環境による | 環境による |
チェックリストNo.1
- 実機の場合は、まずサーバーとなる自分のパソコンと実機が同じネットワーク内にあるのかを確認しておく必要がある。
ifconfig -a
チェックリストNo.2
- ドキュメントには手順として書いてあったのでやっておいたが、必須ではなさそう。（ログインしておくほうが色々と便利な気はする、たぶん）
- ExpoサイトまたはExpo CLIからでもアカウントは作成可能
- Expo CLIと実機にインストールしたExpo moile appでログインしておく。
- エミュレータの方はログインしたことないので不要？
チェックリストNo.3
- 実機の場合はインストールしておく必要がある。
- 上記の通り、作成したExpoアカウントでログインしておく
チェックリストNo.4
- エミュレータの場合は以下のようにパスを通しておく必要がある
- 最終的にはadbコマンドのパスが通っていることが最低限必要そうなので、2個目のコメントはmacOSだけと書いてあるが、Ubuntu機の私も行った。
If you are on macOS or Linux, add the Android SDK location to your PATH using ~/.bash_profile or ~/.bash_rc. You can do this by adding a line like export ANDROID_SDK=/Users/myuser/Library/Android/sdk.
--
On macOS, you will also need to add platform-tools to your ~/.bash_profile or ~/.bash_rc., by adding a line like export PATH=/Users/myuser/Library/Android/sdk/platform-tools:$PATH
--
Make sure that you can run adb from your terminal.
チェックリストNo.5
- これは私の環境だけかもしれないが、これが私の環境では必須
/tmp/metro-cache/配下のオーナーがrootと一般ユーザがごっちゃになっていてpermission deniedで動かなかったので、結局root権限で起動している- ローカルの開発環境の権限設定とかもしっかりしたい。。。
sudo npm start
3-2. ひとまずこのチェックリストにあることをこなす
- チェックリストを確認したら、
- アプリ編集後、編集内容がアプリに同期されることも確認できた。
- 本来ここまで大変ではないと思う笑
- 以下の画像は実際に起動したサンプルアプリと起動後のMetro Bundlerの画面。
