今回はreact nativeを使ってどのようにネイティブアプリを作るのかのフローを学ぶ。
設定
アプリのためのcdを決める。今回はsourceという場所に作りたいので
cd "source" で移動したら
create-expo-app --template で作る。
nagivation type scriptを選んだら、アプリ名を聞かれるので
option-dairy-note って名前にする。
ダウンロードが終わったらoption-dairy-noteにcdして
npx expo start
でexpoプロジェクトを起動する。
※スマホに入っているExpo goにあるQR code読み取り機能で読み取れば実機でシミュレーションできる。
そしたらexpo sqliteのドキュメンテーションのページ
これに従って設定できる
vs codeでアプリのディレクトリに行って(option-dairy-note)
npx expo install expo-sqlite と
npx expo install expo-file-system expo-asset をインストール
そしたらmetro.config.js のファイルを新しく作成してURLに載っているコードをコピペ
(React Nativeのコードを最適化し、iOS・Android・Webの各プラットフォームで動作するように変換するMetro Bundler の設定をカスタマイズするためのファイル)
出来たらhlpersというフォルダを作る。※ファイルじゃないよ!
ヘルパー関数とはよく使う処理を簡単に呼び出せるようにまとめた関数
そしたらそのフォルダの中にsqlite.tsx を作る。tsxはtypescriptの拡張子。
サンプルのデータベースを作る過程
が有用なのでこれをメインに使っている。
具体的なサンプルコードのやつをそのままsqlite.tsxに張り付け。
dbの宣言とファンクション以外は消してファンクションにexport をつける。
次にScreensというフォルダをアプリのディレクトリ上で作ってTabOneScreen.tsxというファイルを作成。
ここに import { createTable, insert, select } from "@/helpers/sqlite"; を追加する。
