やりたかったこと

React Nativeに入門するも、Hello Worldより先になかなか進まなかったので、小さな物でもいいのである程度使えるアプリを作ってみることにした。

お題としてTODOリストのような一般的な物を作ることにしたため、どう実装するかはさておいて、機能については悩みどころがなかったのはよかったと思う。

何を作ろう？どんな機能が必要だろう？から考えてしまうとなかなか進まないので、おきまりの物を作ろうと割り切った。

スクリーンショット

見た目はiOS/Androidもほぼ同じ。

iOSに合わせてレイアウトした。

f:id:ariarijp:20171107131645p:plain

上に若干余白があるが、本来はプラットフォーム別に調整できるところをサボっているだけ。

f:id:ariarijp:20171107133404p:plain

この記事を書いた時点ではREADMEすら書いてないけど、React Nativeの環境ができていれば、 git clone して cd して npm i の後に react-native run-ios とかやれば動くはず。

今回は作りきることが目的だったのでざっくり分けたが、ネイティブもReactも経験が少ないので筋のいい分け方が知りたい。

アイテムが追加されても、FlatListをスクロールするまで新しいアイテムが再描画されなかった。

extraDataというpropを設定し、その値も合わせて更新することで再描画してくれるようになったが、extraDataに配列を渡しても変更を検出してくれないようなので、数値などの値にする必要があるようだ。今回は表示対象のアイテムを保持する配列の長さをextraDataとして使用した。

必要に応じてbindを使って解決したが、bindを使わずにスマートにかけるのであればその方法を知りたい。

個人的にはもうちょっとJavaScriptとその周辺エコシステムを学んだら、もうちょっと気分良くかけるかも。