React Nativeアプリに数値の入力欄を実装してみた話とか

Realmを導入した話の続きです。

 

kdnakt.hatenablog.com

 

 

[rmc-input-numberで入力欄を実装する]

さて、次は前回リンクだけ実装した設定画面。

目標値を設定するための画面なので、数値の入力欄が必要になってくる。

 

まずは、できるだけ素のReact Nativeでやってみようということで、TextInputを利用して入力欄を実装してみる。が、裏で数値への変換を行っているせいか、ちょっと入力した数字を削除したり、うっかり文字列を入力してしまったりするとエラーが出てしまう。

どうやらバリデーションが必要らしい、と気付いたときにはやる気がなくなっていた。

 

そうだ、適当なライブラリを探そう、ということで見つけたのがこちら。

www.npmjs.com

 

適当に導入してみる。

<InputNumber
  min={0}
  max={300}
  onchange={(text) => {
    this.save(text);
  }}
  value={this.state.targetTime}
/>

 

で、設定画面へのリンクをタップするとエラー……。

f:id:kidani_a:20180310014226p:plain

 

ここで公式サイトをよく読まずに、ハハーンstyles的な奴が足りないんだな?と勝手に判断したのが悪手。実際、似たようなとこで困ってるっぽい人もいた。

github.com

 

とりあえず、自作のReactNative StyleSheetを突っ込んでみる。

f:id:kidani_a:20180310014448p:plain

何か知らんがエラーは出なくなった。しかし、入力欄はどこへ……。

公式サイト曰く、

https://zos.alipayobjects.com/rmsportal/dojvWLzTShEfSAU.png

こういう入力欄を表示してくれるはずなのだが……。

 

で、よくよく公式サイトを読んでみると、プロパティに関する説明が。​

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}
/>

と、修正する。 

 

f:id:kidani_a:20180310015649p:plain

やったー!入力欄が表示された。

+/-のボタンも動くし、いい感じ。

 

[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);
}

 

で、TextInputvalueプロパティにinputDisplayValueFormatを渡すと、

f:id:kidani_a:20180311034315p:plain

とまあ一応表示が修正された。どちらかというとstylesのimport問題よりこっちの件のPRの方が必要な気がする。

 

入力欄の表示位置が微妙な問題はあるけど、その辺はそのうちまとめて修正しよう。

 

[まとめ]

とりあえずこれで、色々と問題はあるものの、DBを使って目標プランク時間の設定をすることがでいるようになった。

 

次の目標としては、続々々・オリジナルのReact Nativeアプリを作り始めた話とかでも書いたように、 

といったところ。

 

今日のブログ執筆BGMはこちら。

www.youtube.com

 

[2018/03/24追記]

続きを書いた。 

kdnakt.hatenablog.com