桜が咲き始めましたね。
天気悪いしすぐ散りそうですが……。
[プランクの実行履歴を見る]
現在の起動時画面です。
左上にログ画面への導線ができました。色々ダサいのは、まあこれから直すってことで。
ログの画面は今とりあえずこんな感じ。
雑に作りすぎた。
[FlatListの使いどころ]
ログ画面ではとりあえずFlatListにお世話になってます。
FlatListなるコンポーネントを知った経緯についてはこちらの記事に。
とにかく実行した日時と、実行した秒数だけ出ればいいやってことで、今の実装になっってるが、元のアプリだと下の画像みたいに棒グラフになってるので、こういう形式で表現できるように頑張らねば。
雑に過去7回分の実行記録出したりしてるのも意味わかんないし、止めたい。
FlatListはリストの項目のキーをkeyExtractorで指定するのだが、適当にここにnumber型のidを渡したらwarningが出た。
曰く、Invalid child context `virtualizedCell.cellKey` of type `number` supplied to `CellRenderer`, expected `string`だそうで。別にnumberでもいいじゃんと思うのだが、stringがいいらしい。
まあ、黄色のwarning画面で済んで、ログ画面自体は描画されるので、そこまで問題ではないようだ。念のため、id.toString()を追記して、warningが出なくなることを確認した。
React Nativeをバージョンアップしたら仕様変わってエラーになりました！とかなったら面倒だし、警告には素直に従っておこう。
とはいえ、棒グラフバージョン実装したらこの辺のコードは消えるかな？ま、いいや。
[公式ドキュメントサイコー！]
FlatListに過去の記録ずらっと全部並べるのもかっこわるいと思ったので（そのくらいの知恵はある）、過去7回分ずつをサラサラと遡ることができるように、「◀︎」と「▶︎」のボタンを配置してみた。
最初は<TouchableHighlight>を適当に2つ並べたら、上下にボタンが並んでしまってガッカリ。
流石に上下の表示は辛い、と思ったものの、この仕事始めてからこっちずっとcss苦手マンなので、justifyとかhorizontallyとかstyleとか、それっぽい用語でググって適当な対処方法を探す。
たどり着いたのがこちらの公式ドキュメント。
サンプルコードもあるし、何と言ってもサンプルを直接編集してやりたいことが試せるのが良い。
// Try setting `flexDirection` to `row`.
<View style={{
flex: 1,
flexDirection: 'column',
justifyContent: 'space-between',
}}>
このあたりが使えそうだったので、横並びにする場合はflexDirectionをrowにせよとの教えに従ったところ、2枚目の画像みたいな感じに出来上がった（まだ、縦位置が微妙とか、横の広がり具合が微妙とか、色々問題はあるが）。
flexとかの属性は、そういえば昔いたプロダクトの他チームのマネージャさんが勉強会とかやってくれてたなあ。ご覧の通り、あまり身につかなかったけれど。もっと真面目に参加すればよかったな。
[まとめ]
実戦投入というにはあまりにもショボい……というわけで、開発はまだまだ続きます。
今日のブログ執筆BGMはこちら。
