今回は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"; を追加する。