Skip to content

Expo

ExpoとFlutter選択

ちょっとしたアプリを作るのに、どちらが良いのか迷っている。

ExpoはWindows環境でもiOS実機で動作確認ができるのが魅力。

ただ、「ちょっとした」アプリでそこまでする必要があるのかというと微妙。

やっぱりFlutterの習熟度を上げていくのが良いのかなぁ。

Expo

以前一度使ってみたことがあるExpoに再入門。

前にやったときはWSLだとダメでラズパイで動かしていたけど、もう１年以上たっているしいけるのでは？という期待を込めてWSL2でやってみる。

$ sudo npm install --global expo-cli
$ cd photomap
$ expo init .
✔ Choose a template: › tabs (TypeScript)   several example screens and tabs using react-navigation and TypeScript
✔ Downloaded template.
📦 Using npm to install packages.
✔ Installed JavaScript dependencies.

✅ Your project is ready!

To run your project, run one of the following npm commands.

- npm start # you can open iOS, Android, or web from here, or run them directly with the commands below.
- npm run android
- npm run ios # requires an iOS device or macOS for access to an iOS simulator
- npm run web
Project is already inside of a git repo, skipping git init.

$ npm start

> photomap@1.0.0 start
> expo start

Starting project at /home/umemak/workspace/photomap
Starting Metro Bundler

› Metro waiting on exp://127.0.0.1:19000
› Scan the QR code above with Expo Go (Android) or the Camera app (iOS)

› Press a │ open Android
› Press w │ open web

› Press r │ reload app
› Press m │ toggle menu

› Press ? │ show all commands

Logs for your project will appear below. Press Ctrl+C to exit.
✔ It looks like you're trying to use web support but don't have the required dependencies installed. Would you like to install
webpack-dev-server@~3.11.0, @expo/webpack-config@~0.16.2? … yes

✔ Installed webpack-dev-server@~3.11.0, @expo/webpack-config@~0.16.2
CommandError: Missing package "webpack-dev-server" in the project. Try running the command again. (cwd: /home/umemak/workspace/photomap)

Expo GoでQRスキャンしても、LAN内のIPアドレス指定してマニュアル接続してみても接続できなかった。

Read more

Raspberry pi4 で expo を動かす

WSLでいろいろ試してみたものの、ポート関連のエラーで動かないので、Raspberry piで試してみた。

Rubyインストール

  • Homebrewインストールしようとしたときに、Rubyがないエラーで先に進まなくなってしまったので先にインストールしておく。
  • rbenvを使ってみる。
  • 途中でパッケージが足りないエラーが出るので、libssl-devとlibreadline-devを入れる。
$ sudo apt-get install -y libssl-dev libreadline-dev
$ git clone https://github.com/rbenv/rbenv.git ~/.rbenv
$ echo 'export PATH="$HOME/.rbenv/bin:$PATH"' >> ~/.bashrc
$ echo 'eval "$(rbenv init -)"' >> ~/.bashrc
$ git clone https://github.com/sstephenson/ruby-build.git ~/.rbenv/plugins/ruby-build
$ rbenv rehash
$ rbenv install --list
$ rbenv install 2.6.6
$ rbenv global 2.6.6
$ rbenv rehash
$ ruby --version
ruby 2.6.6p146 (2020-03-31 revision 67876) [aarch64-linux]

Homebrewインストール

$ /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install.sh)"
$ sudo apt-get install build-essential
$ echo 'eval $(/home/linuxbrew/.linuxbrew/bin/brew shellenv)' >> /home/pi/.profile
$ eval $(/home/linuxbrew/.linuxbrew/bin/brew shellenv)
$ brew --version
Homebrew 2.4.8
Homebrew/linuxbrew-core (git revision 39fddf7; last commit 2020-07-21)

Nodebrewインストール

  • これも先日と同様。
$ brew install nodebrew
$ mkdir -p ~/.nodebrew/src
$ nodebrew install stable
$ nodebrew ls
$ nodebrew use v14.6.0
$ vi ~/.profile
export PATH=$HOME/.nodebrew/current/bin:$PATH
$ source ~/.profile
$ node -v
v14.6.0

Expoインストール

  • グローバルにexpo-cliをインストールしないで、init後にaddしている。
  • テンプレートはtabs (TypeScript)を選択した。
$ cd workspace/
$ npx expo-cli init expotest
$ cd expotest/
$ npm install --save-dev expo-cli
  • npm start後、しばらくすると以下のエラーが出るので、上限を上げる。
Error: ENOSPC: System limit for number of file watchers reached, watch '/home/pi/workspace/expotest/node_modules/metro/node_modules/string-width/node_modules/ansi-regex'

$ cat /proc/sys/fs/inotify/max_user_watches
8192
$ sudo su
# echo fs.inotify.max_user_watches= 65536 | tee -a /etc/sysctl.conf
fs.inotify.max_user_watches= 65536
# cat /proc/sys/fs/inotify/max_user_watches
8192
# sysctl -p
fs.inotify.max_user_watches = 65536
# cat /proc/sys/fs/inotify/max_user_watches
65536
# exit

Expo起動

$ npm start
  • 表示されたQRコードを、iOSやAndroidのアプリで開くと表示される。
  • 初回はJavaScriptのビルドが走る（アプリの画面下部に進捗が表示される）。
  • それ以降はソースを変更するとほぼリアルタイムで反映される。