😸

Expo + Electron + NativeBase でToDoアプリのサンプルを動かす(デスクトップ+スマホ+WEB)

2022/07/17に公開

前回記事で作ったExpo + Electron環境に、NativeBase公式で紹介されているToDoアプリのコードを組み込んで、テンションをさらに上げてみる。
作業的にはApp.jsを差し替えるだけになります。

NativeBaseのToDoアプリ(サンプルコード)とは

https://docs.nativebase.io/todo-list

80行程度のサンプルで、シンプルかつデザイン性があり、
動きもあり基本となるリスト要素のCRUD操作も学べるとてもいいサンプルです。

是非上記playgroundで動きを確認してください。

https://zenn.dev/waterz1815/articles/727b4e1910fa09

ローカルでのToDoアプリサンプルを動かす

前回プロジェクトからApp.jsを差し替えるだけです。
Electron連携も行います。
コピペしてビルドするだけですが、よりアプリ感が感じられるでしょう。

前記事の環境を作る

https://zenn.dev/waterz1815/articles/2c3726e83e675c
作成済の場合はそれをそのまま使用する。

ToDoアプリのソースをローカルに配置

  1. サンプルコードの参照
  • ToDoアプリのサンプルサイトから、コード欄横の「Open Expo Snack」アイコンをクリック
  • import文を含むコード全体を「Expo Snack」画面で表示する
  1. ローカル環境のApp.jsを削除
  2. 上記サイトの「App.tsx」のコード内容をコピーし、App.tsxとしてローカルにファイル作成

起動コマンド実行で動かす

ローカル環境で起動コマンドを実行

yarn start

「w」キー押下でWEBアプリが起動します。

ToDoアプリのWEBアプリ版

もちろんElectronで、デスクトップアプリとしても動きます。

yarn expo-electron start


ToDoアプリのElectronのデスクトップ版

テンションあがりますね!

Discussion