のらねこの気まま暮らし

技術系だけど、Qiita向きではないポエムとかを書くめったに更新されないヤツ

ReactNativeにNativeBaseを導入してUIを整える

概要

天気の情報を入れた、が！ CloudsとかClearとか言われてもわけわからん！ いつの天気！？ みたいに思うのでとりあえずUIをそれっぽくしてみようと思った。

前回:

mizuki-r.hatenablog.com

情報設計

L2. いつ L1. 天候 L3. 気温, 湿度, 気圧 L4. 更新

対応フロー

  1. リファクタリング 1.1. 起動時に天気を取得する
  2. ワイヤーフレームの作成 2.1. ヘッダ 2.2. 天気アイコンの表示 2.3. 今日の天気レイアウト 2.4. 更新ボタンのレイアウト

実装調査

起動時初期化

ContainerでcomponentDidMount時にasyncAction発行すれば行けそう。

UI

NativeBase

他のMaterial系とかも探したけど、 ここ数ヶ月でメンテされてて、情報がありそうなフレームワークがぱっと見みつからなかった。

そういうの探すのにおすすめな記事とかあれば知りたい。 そういうの探すのにおすすめな記事とかあれば知りたい。(こういうのとか)

Comonents

まあこの辺使えばいけるんじゃないの？的なやつ。

実装

  • API通信が「取得」から「読み込み（自動）」「再読込（ユーザアクション）」に別れたことで、UseCase, Action, Reducerに変更が必要となった
    • めんどくさくてUseCaseだけ分けた
    • あとで違うインタラクションにしてくれって言われたときに困るかもしれない
      • ローディングの有無とか、表示の仕方とか
      • 困らないかもしれない
    • Viewから見て別れていれば一旦おｋ
      • いやこれ、絶対あとで「クソだろ」って思う
  • react-baseがコケた
    • Error: Unable to resolve module 'create-react-class'
  • NativeBaseでReactNativeのComponentを置き換え
  • NativeBaseでアイコン利用
    • type, name を指定するが、☓になる
    • 名前を変えても☓
    • react-native linkしてなかった
    • デフォルトはIonicons
  • ボタン+アイコンがいい感じの配置にならない
    • ドキュメントのコードとキャプチャが違う
    • サンプルを示してくれ！！！！

Error: Unable to resolve module create-react-class

Loading dependency graph, done.
error: bundling failed: Error: Unable to resolve module `create-react-class` from `/Users/mizuki/project/rnapp-weather/node_modules/native-base/dist/src/basic/Picker.android.js`: Module `create-react-class` does not exist in the Haste module map

インストールで解決。

$ npm install --save create-react-class

NativeBaseの利用

$ npm install --save native-base
$ react-native link

Android EmulatorのScreen shot

$ adb shell screencap -p /sdcard/screen.png
$ adb pull /sdcard/screen.png /tmp/screen.png
$ adb shell rm /sdcard/screen.png
$ open /tmp/screen.png

参考: MacでAndroid開発中に手軽にスクリーンショットを撮る

完成図

f:id:ry_mizuki:20180624224206p:plain