😸
Expo + Electron + NativeBase でToDoアプリのサンプルを動かす（デスクトップ＋スマホ＋WEB）
前回記事で作ったExpo + Electron環境に、NativeBase公式で紹介されているToDoアプリのコードを組み込んで、テンションをさらに上げてみる。
作業的にはApp.jsを差し替えるだけになります。
NativeBaseのToDoアプリ（サンプルコード）とは
80行程度のサンプルで、シンプルかつデザイン性があり、
動きもあり基本となるリスト要素のCRUD操作も学べるとてもいいサンプルです。
是非上記playgroundで動きを確認してください。
ローカルでのToDoアプリサンプルを動かす
前回プロジェクトからApp.jsを差し替えるだけです。
Electron連携も行います。
コピペしてビルドするだけですが、よりアプリ感が感じられるでしょう。
前記事の環境を作る
作成済の場合はそれをそのまま使用する。
ToDoアプリのソースをローカルに配置
- サンプルコードの参照
- ToDoアプリのサンプルサイトから、コード欄横の「Open Expo Snack」アイコンをクリック
- import文を含むコード全体を「Expo Snack」画面で表示する
- ローカル環境のApp.jsを削除
- 上記サイトの「App.tsx」のコード内容をコピーし、App.tsxとしてローカルにファイル作成
起動コマンド実行で動かす
ローカル環境で起動コマンドを実行
yarn start
「w」キー押下でWEBアプリが起動します。
ToDoアプリのWEBアプリ版
もちろんElectronで、デスクトップアプリとしても動きます。
yarn expo-electron start
ToDoアプリのElectronのデスクトップ版
テンションあがりますね！
Discussion