続々・オリジナルのReact Nativeアプリを作り始めた話とか

プランクアプリを実装中。

 

kdnakt.hatenablog.com

 

 

[プログレスバー探し]

前回のブログで、とりあえずストップウォッチは実装できたので、今回はプログレスバーを画面に実装してみる。

これは流石に何か良さげなコンポートが公開されているだろう、ということで例によってGoogle先生にお世話になる。

 

qiita.com

おお、なんかすごい良さげなブログ記事が。 

 

github.com

で、見つけたのがコチラ。めっちゃ良さそう。 

 

[プログレスバー実装結果]

とりあえず、目標値は固定で1分間にしておく。

これをオプション化して、自由に設定できたりとか、30日分のスケジュールに従った目標値を自動的にロードしてくるのはまた今度。

 

画面全体のイメージとしてはこんな感じ。

f:id:kidani_a:20180222020602p:plain

 

動いているところも例によってGIPHY CaptureでGifアニメにしておく。 

f:id:kidani_a:20180222021022g:plain

プログレスバーの進み方がややカクカクしてるのが気になるので、もう少しヌルヌルと動かしたい。READMEは読んだが、特にそれらしいオプションは無さそうだったので、何か外付けする方法を模索するか、実装してプルリクを送るか、になりそう。

 

 で、目標値に到達すると、終了時のメッセージを表示する。

f:id:kidani_a:20180222020814p:plain

今はとりあえず「Finished」と固定でアラートにしているが、何かしらいい感じの画像を一緒に表示するとか、毎回違うメッセージを表示するとか、工夫はできそう。

 

[まとめ]

文章量少ないけど、進捗報告なのでこのくらいで。

 

[2018/03/01追記]

続きを書いた。 

kdnakt.hatenablog.com