Expo30.0.0の主な変更点的なお話

Expoの30.0.0が使えるようになったので、それを簡単にまとめました的な。 ちなみに本家のブログはこちらから。

■React Native0.57.0にはアップデートしない

これは前回と同じ理由。
babelとかv0.57がまだ安定していないとか大した変更ないしね的な。
ただTextInput問題については修正したよとのこと。
この修正があるのとないのとではだいぶ違うよね。
ということで自分が以前書いたTextInputの仕様をどうにか解決する方法をついに使わないでもよいみたい。

■JSのbundleを自分のサーバでホストできるようになった

今まではexp.hostでバンドルをホスティングしてたわけだけども、ついにこれが自分とこのサーバでもできるようになったとのこと。
ドキュメントはこちら

- アプリをexportする

First, you’ll need to export all the static files of your app so they can be served from your CDN. To do this, run expo export in your project directory and it will output all your app’s static files to a directory named dist. Asset and bundle files are named by the md5 hash of their content. Your output directory should look something like this now:

expo exportっていうコマンドを行うとdistっていうディレクトリに諸々出てくるよとのこと。

.
├── android-index.json
├── ios-index.json
├── assets
│   └── 1eccbc4c41d49fd81840aef3eaabe862
└── bundles
      ├── android-01ee6e3ab3e8c16a4d926c91808d5320.js
      └── ios-ee8206cc754d3f7aa9123b7f909d94ea.js

- 静的ファイルのホスティング

Once you've exported your app's static files, you can host the contents on your own server. For example, in your dist output directory, an easy way to host your own files is to push the contents to Github. You can enable Github Pages to make your app available at a base URL like https://username.github.io/project-name.

To host your files locally, follow the instructions below in the 'Loading QR Code/URL in Development' section on setting up a local HTTP server.

github pages使うとホスティング簡単だよっていう感じ。
ローカルでホストする方法については後述する的な。

- アプリをビルドする

In order to configure your standalone binary to pull OTA updates from your server, you’ll need to define the URL where you will host your index.json file. Pass the URL to your hosted index.json file to the expo build command.

For iOS builds, run the following commands from your terminal:expo build:ios --public-url , where the public-url option will be something like https://quinlanj.github.io/self-host/ios-index.json

For Android builds, run the following commands from your terminal:expo build:android --public-url , where the public-url option will be something like https://quinlanj.github.io/self-host/android-index.json

index.jsonファイルをホストするURLを定義する必要があるからiosとandroidでそれぞれ以下のコマンド叩いてねとのこと。
ちなみにpath-to-index.jsonはgithub pagesにあげた場合は多分こんな感じになるかと。
https://username.github.io/project-name/ios-index.json

build:ios --public-url 
build:android --public-url 

- QRコードとURLをExpoのクライアントアプリで読み込む

If you are loading in your app into the expo client by passing in a URL string, you will need to pass in an URL pointing to your json file.

さっき定義したURLのところを読み込めばいいみたいな。
この場合だとiosの場合はios-index.json、androidの場合はandroid-index.jsonとして読み込んでねとのこと。
https://quinlanj.github.io/self-host/android-index.json

The URI you’ll use to convert to QR code will be deeplinked using the exps/exp protocol. Both exps and exp deeplink into the mobile app and perform a request using HTTPS and HTTP respectively. You can create your own QR code using an online QR code generator from the input URI.

QRだったらhttpsとかhttpをexpsとかexpに変えてQRコード作成サイトで作ってねとのこと。
exps://quinlanj.github.io/self-host/ios-index.json

Run expo export in dev mode and then start a simple HTTP server in your output directory:

# Find your local IP address with `ipconfig getifaddr en0`
# export static app files
expo export --public-url http://`ipconfig getifaddr en0`:8000 --dev

# cd into your output directory
cd dist

# run a simple http server from output directory
python -m SimpleHTTPServer 8000

ローカル環境で開発してる場合は、こんな感じでコマンド打ってねとのこと。
http://192.xxx.xxx.xxx:8000/android-index.json
URLがこんな感じになるのでこれをexpプロトコルにしてQRコードにしてねとのこと。

- デバッグ用にソースマップも出せるよ

Run expo export --dump-sourcemap. This will also export your bundle sourcemaps in the bundles directory.

A debug.html file will also be created at the root of your output directory.

In Chrome, open up debug.html and navigate to the Source tab. In the left tab there should be a resource explorer with a red folder containing the reconstructed source code from your bundle.

expo exportする際に--dump-sourcemapっていうオプションもつけてあげればソースマップが出るみたい。
debug.htmlっていうファイルが生成されるからそれをChromeで開いてSourceタブを覗くとデバッグできるよ的な。

- 画像とかのフォルダ名を変えられるよ

By default, all assets are hosted from an assets path resolving from your public-url (e.g. https://quinlanj.github.io/self-host/assets). You can override this behavior in the assetUrlOverride field of your android-index.json. All relative URL's will be resolved from the public-url.

ios-index.jsonとかandroid-index.jsonにassetUrlOverrideっていう項目があるからそこを変えてねとのこと。

- ios-index.jsonとかandroid-index.jsonのフィールドの説明

revisionId, commitTime, publishedTime: These fields are generated by expo export and used to determine whether or not an OTA update should occurr.

bundleUrl: This points to the path where the app's bundles are hosted. They are also used to determined whether or not an OTA update should occurr.

slug: This should not be changed. Your app is namespaced by slug, and changing this field will result in undefined behavior in the Expo SDK components such as Filesystem.

assetUrlOverride: The path which assets are hosted from. It is by default ./assets, which is resolved relative to the base public-url value you initially passed in.

slug変えちゃうとFileSystemとかそういった部分でエラー起きちゃうからダメとのこと。
assetUrlOverrideは先ほど記述したアセットフォルダの変更ができる。
それ以外についてはOTA更新とかそれ関係。

■ExpoKitとして色々と分離してるよ

v29のときもあったけど、ExpoのライブラリをXcodeとかAndroid Studioから使うにはExpoKitを使わないといけないんだけどこれが重いわけで。
○○だけ使いたいのに他いらないよとかっていう人のために今色々と機能を分離しているわけで。
ってことでv30のタイミングでまた色々と独立させたよ的な。

■expo-cliのv2がリリースされた

とのこと。
まだexpo-cliを使っていないので割愛。

■snack改善したよ

改善されたらしい

■新しいAPIの追加とかAPIの改善

- react-native-screensの追加

kmagiera/react-native-screensが追加されたとのこと。
将来的なreact-navigationで使われるだかなんだかっていうことで、これ重要になるっぽい。
いまいち使い方がわからないけどキャッチアップしておく重要度は高いかと。

- AndroidのExpoKitでExpo Analyticsを無効にできるよ

っていうこと。
個人的には気にしないから割愛。

- 他色々と改善されたよ

色々と改善されたみたい。
以下気になったとか重要だなぁと思ったものだけ。

- BarCodeScannerで本体に保存されている画像から読み込める

これは超やばい。
今まで本体に保存されているQRコードをデコードすることができなかったので、自分がライブラリを作っていたんだけどそれが必要なくなった。
悲しいけどうれしい。

https://docs.expo.io/versions/v30.0.0/sdk/bar-code-scanner#expobarcodescannerscanfromurlasyncurl-barcodetypes
ここに書いてあるように新しくscanFromURLAsync(url, barCodeTypes)というメソッドが追加された。
流れ的にはImagePickerから画像を読み込むとローカルのuriが取得できるのでそれを渡せばOK。
下記のような感じになるんじゃないかと。
ちなみにiOSはQRコードしかデコードできないとのこと。

let result = await ImagePicker.launchImageLibraryAsync({
  allowsEditing: true,
  aspect: [4, 3],
});

BarCodeScanner.scanFromURLAsync(result.uri,BarCodeScanner.Constants.BarCodeType.qr);

- androidのintentフィルターが設定できるようになった

関連するPRはこちらから。
app.jsonに記述できるようになったとのこと。
ただ2018/09/13 11:00時点ではdocsに載ってない。

ちなみにintentとは？
そもそもintentって何？っていうこともあるんだけどtwitterの投稿画面を開くとかそんなやつ。
これは地味に便利。

ってなわけで毎月毎月バージョンアップされてる感じがあるからいいよね。
個人的にはBarCodeScannerの対応とTextInputの対応がすごく嬉しい。
プルリクを送ったわけじゃないけどissueに答えたりとかもしてたり、Expo対応の画像QRデコードとかも作ったりしたわけだし。
あとreact-native-screensがよくわからないけどちょっと試してみたいと思う的なみたいな。