Realmを導入した話の続きです。
[rmc-input-numberで入力欄を実装する]
さて、次は前回リンクだけ実装した設定画面。
目標値を設定するための画面なので、数値の入力欄が必要になってくる。
まずは、できるだけ素のReact Nativeでやってみようということで、TextInputを利用して入力欄を実装してみる。が、裏で数値への変換を行っているせいか、ちょっと入力した数字を削除したり、うっかり文字列を入力してしまったりするとエラーが出てしまう。
どうやらバリデーションが必要らしい、と気付いたときにはやる気がなくなっていた。
そうだ、適当なライブラリを探そう、ということで見つけたのがこちら。
適当に導入してみる。
<InputNumber
min={0}
max={300}
onchange={(text) => {
this.save(text);
}}
value={this.state.targetTime}
/>
で、設定画面へのリンクをタップするとエラー……。
ここで公式サイトをよく読まずに、ハハーンstyles的な奴が足りないんだな？と勝手に判断したのが悪手。実際、似たようなとこで困ってるっぽい人もいた。
とりあえず、自作のReactNative StyleSheetを突っ込んでみる。
何か知らんがエラーは出なくなった。しかし、入力欄はどこへ……。
公式サイト曰く、
こういう入力欄を表示してくれるはずなのだが……。
で、よくよく公式サイトを読んでみると、プロパティに関する説明が。
| name | type | default | description |
|---|---|---|---|
|
styles |
ReactNative StyleSheet | component's stylesheet, can use lib/styles |
lib/stylesというパスに、標準で用意してくれてるらしい。
だったら最初からimportしなくても済むようにしておいて欲しいもんだ……。PR送ってみようかしら。
ともあれ、
import InputNumberStyles from 'rmc-input-number/lib/styles'; <InputNumber min={0} max={300} onchange={(text) => { this.save(text); }} styles={InputNumberStyles} value={this.state.targetTime} />
と、修正する。
やったー！入力欄が表示された。
+/-のボタンも動くし、いい感じ。
[rmc-input-numberのformatterが効かない]
しかし、入力欄のフォーマットがタイマー画面と違うのも微妙だ。という訳で、formetter={formatTime}プロパティをInputNumberに追加してみるが、画面に変化がない。
デバッガでコードを見てみると、m-input-number/src/index.ios.jsではformatterは使われていない。index.jsの方だと使われているのに。普通にWeb版のReact用に使うと動くってことなのかな。Githubのサンプルでは確かに動作していたし、きっとそういうことなんだろう。
仕方ないので、インストールしたライブラリを直接弄ってみることに。node_modules/m-input-number/lib/index.ios.jsを適当に修正してみる。
150行目くらいに追加（version=1.0.4）。
var inputDisplayValueFormat = inputDisplayValue;
if (props.formatter) {
inputDisplayValueFormat = props.formatter(inputDisplayValue);
}
で、TextInputのvalueプロパティにinputDisplayValueFormatを渡すと、
とまあ一応表示が修正された。どちらかというとstylesのimport問題よりこっちの件のPRの方が必要な気がする。
入力欄の表示位置が微妙な問題はあるけど、その辺はそのうちまとめて修正しよう。
[まとめ]
とりあえずこれで、色々と問題はあるものの、DBを使って目標プランク時間の設定をすることがでいるようになった。
次の目標としては、続々々・オリジナルのReact Nativeアプリを作り始めた話とかでも書いたように、
といったところ。
今日のブログ執筆BGMはこちら。
[2018/03/24追記]
続きを書いた。
