前回の続きです。
[現在のタスク]
- 目標プランク時間を任意に設定できるようにしたい
- 設定画面へのボタンを用意する
- 設定画面で入力項目を表示する
- 設定値をDBに保存する
- 設定値を読込み、画面に表示する
他にも細かいのがあったりするけどとりあえずはこの辺を進めて行く。
[設定画面のためのアイコンにチャレンジ]
設定画面のアイコンと言えば、やはりcog。
というわけで、このライブラリを使って、FontAwesomeの導入にチャレンジ。
しかし、jsでFontAwesomeをimportしてシミュレータに表示し様子とすると次のエラーが……。
error: bundling failed: Error: While resolving module react-native-vector-icons/FontAwesome, the Haste package react-native-vector-icons was found. However the module FontAwesome could not be found within the package. Indeed, none of these files exist:
ググるといくつか解決策らしきものが出てくる。
曰く、ビルドしろだのXCodeの設定を見直せだの。しかしどれも効果なし。
というわけでこれを試してみる。
このコマンドを実行しろとある。
rm node_modules/react-native/local-cli/core/__fixtures__/files/package.json
ファイルを消すと、元に戻す必要が生じた時に面倒になりそうだったので、適当な名前にリネームしてお茶を濁す。
しかし、濁ったお茶ではダメだったようだ。
まだ何か設定が足りないらしい。
残念だが、「Config」の文字を表示して設定画面にリンクすることとし、一旦いい感じのアイコンを表示するのは諦める。アイコンを表示するのは二の次であって、設定をすることが優先事項なので。あとは、アイコン問題と格闘しても毎日コードは書けなそうなので、コード書く合間にちょっとずつ色々試して、解決できればいいかと。
というわけで現在の画面はこんな感じ。
ここで勉強したreact-navigationを使っている。
[データベース導入]
設定値を保存するためのDBを探したところ、AsyncStorageというのがあるらしかった。
ただのKVSっぽいのと、ファイルに書き込むのが微妙だなーと思っていたら、良さげな記事を見つけた。
というわけでRealmをインストールしてみた。
データのスキーマを分けられるようなので、単純な設定値を保存するスキーマと、プランク結果を記録するスキーマと、と言った感じで分けて使えそうだったので、AsyncStorageではなくこちらを採用した。
AsyncStorageでも、キーの命名の工夫で乗り切れなくはないと思うが、型の制約が強い方が好きなので、スキーマで分けられるRealmの方が好み、という理由もある。
実際にデータの出し入れはまだこれからのお楽しみ（やってないだけ）。
[まとめ]
このタイトルどこまで長くなるんだろう……。
早く完成させなければ。
コードはコチラ。
[2018/03/11追記]
続きを書いた。
