Closed15

Utility Firstに生まれ変わったNativeBase 3.0つまみ食い

  • https://nativebase.io/
  • 3.0になって大幅アップデート
    • もはや別物。
  • Utility First
    • TailwindとかChakra UIとか
    • APIとしてはChakra UIをかなり参考にしてる気がする

Installation

$ expo install native-base styled-components styled-system react-native-svg react-native-safe-area-context

Chakra UIとの類似・差異

  • Utilityの仕組み
    • NativeBaseはstyled-systemを使っている模様
    • responsiveの仕組みもだいたい一緒っぽい
  • Stack/VStack/HStack
    • ZStackはChakraにも無い部分
    • ちなみにChakraでは<Stack spacing={4}>だが、NativeBaseは<Stack space={4}>がちょっと罠
  • Factory機能
  • Default Theme カラー体系・サイズ数値
  • コンポーネント関連はかなり近い
    • Avater / KBDとかはあまり見られないので、これは意識してそうに思える

Chakraとの違い中心の話

  • BoxにonPressが出来ない
    • これはReactNativeの都合かも
    • Tapさせたい場合はPressableを利用する必要アリ
  • Stackにdividerを設定出来ない
    • 地味に便利だったのでちょっと物足りなさある

2.0からのアップグレードどうする問題

正道: 気合で置き換える

  • 量が少なくてそこそこテストがあればこれでいけそう
  • とりあえずマイグレーションガイドはこのへんにある。コンポーネントごとにまとまってるのは嬉しい
  • とはいえ、あまりに別物すぎて厳しい可能性ありそう
    • 自分の場合はそれほど多用してなかったのでちょっとで済みそうだった
  • 一部名前や使い方だけ一緒で別物になってそうなコンポーネントとかもありそうな気配だったので、結構怖いかも

案1: webpackとかゴニョゴニョして3系と2系わけていく

  • TypeScript考えると厳しそう
  • というかRNのwebpackとかいじるのやばそうでは

案2: 一旦別のUIライブラリで置換して切り替える二段階方式

  • 急がば回れ?
  • react-magnus-uiとかは結構思想が近いのでこの対象には良いかも
  • TypeScriptも入れてない状況だとこれぐらいしか安全にやっていく方法は無いかも・・・
  • jestコケる問題(未解決)
    • <NativeBaseProvider>を挟むとjestがコケるっぽい(SafeAreaViewまわり?)
    • とりあえずNativeBaseを利用するのにNativeBaseProviderは必須ではなさそうな気配なので、一旦外せばよさそうではあった
    • 2.0は<Root>周りが消えたのは結構うれしい(fontを要求してたりでうるさかった・・・)

コンポーネントあれこれ

Listがかなり変化してる

  • 2.0系のListは、LayoutとしてのListだったが、3.0系は<ul>``<li>のようなListと見たほうが近そう
    • 3.0系にListItemが消えているので、おそらく型で気づく気もしつつ・・・
    • 何も表示されなかったりしたら疑ったほうが良さげ
  • マイグレーションガイドなさそう・・・

型関連

  • どうもコンポーネントの型は未完成っぽい?
    • IFooPropsみたいな感じ
    • 個別に指定を引っ張ってくるのが難易度高そう
    • ReactNativeのProps系ともどっちを使うべきか?みたいな感じがある
このスクラップは3ヶ月前にクローズされました
ログインするとコメントできます