expoは次の引用の通り、Reactを用いたAndroid、iOS、Webアプリケーションを構築するフレームワークです。実験的ですが electron との連携機能もあります（この記事を書いている時点で連携機能パッケージのバージョンは貫禄の”0.0.0-alpha.53″です）。
Expo のツール、サービス、React を使用すると、同じ JavaScript コードベースからネイティブの Android、iOS、Web アプリを構築、デプロイ、迅速なイテレーションを行うことができます。
With Expo tools, services, and React, you can build, deploy, and quickly iterate on native Android, iOS, and web apps from the same JavaScript codebase.
Expo
Expoはreact-nativeを拡張したExpoAPIに従った画面定義を作り、ロジックをTypeScriptやJavaScriptで作りExpoの提供する機能で各プラットフォーム向けのビルドをします。根元にあるソースコードが一つになる、ビルド関連が楽になるという利点があります。
インストール方法はよくあるnpm系のCLIツール同様です。次の2コマンドでプロジェクトの初期化ができます。
npm i -g expo-cli # PCのグローバル下にexpoを動かすツールをインストール expo init [プロジェクト名] # プロジェクトの生成。対話コマンド
プロジェクトを作成したら適宜react-nativeを拡張したExpoのルールに従ってコードを書き、package.jsonにある次のscriptを動かしてデバッグをします。デバッグはコマンドを動かしたPCがサーバとなり同一LAN内のマシンにアプリないしwebページを共有する仕組みで、Expo専用アプリとQRコードでなされます。
Expo – Google Play のアプリ
"scripts": {
"start": "expo start",
"android": "expo start --android",
"ios": "expo start --ios",
"web": "expo start --web",
"eject": "expo eject"
},
次のビルドコマンドを実行すればアプリにコンパイルされます。
expo build:ios|bi [options] [project-dir] Build a standalone IPA for your project, signed and ready for submission to the Apple App Store. build:android|ba [options] [project-dir] Build a standalone APK or App Bundle for your project, signed and ready for submission to the Google Play Store. build:web [options] [project-dir] Build a production bundle for your project, compressed and ready for deployment.
Elecron連携は実験的機能で次のドキュメントから辿れます。
Using Electron with Expo for Web – Expo Documentation
必要なコマンドは次です。
# インストール yarn add -D @expo/electron-adapter yarn expo-electron yarn add -D electron-builder # ビルド yarn electron-webpack && yarn electron-builder --dir -c.compression=store -c.mac.identity=null
Expoは便利ですがExpoの取り扱っている機能以外を扱うのは難しいという欠点があります。例えばExpoの画面構造を決定するコードは次の様なHTML風コードであり、HTMLは使えません（とりあえずdivタグにスタイルをあてれば大丈夫みたいな横着ができない）。
export default function App() {
return (
<View style={styles.container}>
<Text>Open up App.tsx to start working on your app!</Text>
<Text onPress={()=>{console.log('hi')}}>hogehoge</Text>
</View>
);
}
次のAPIリファレンスがバイブルになります。
API Reference – Expo Documentation
expoは2017-2018ぐらいに始まりを見せたフレームワークで基本的な機能は確保されています。しかしながら課金周りやアナリティクス系の機能をサポートしておらずそういった際には特別な処理を入れてExpoの外に出て色々触る必要があるらしいです（まだ基本的な機能しか触っていないので体験なし）。
