React NativeのコアUIコンポーネントは、スタイリングの多くを自分で行う場合に、多くのクロスプラットフォームパワーを提供します。 一方、基本的なButton（TouchableOpacityは誰ですか？）さえ欠けているので、もう少し基盤を持って次のReactNativeプロジェクトを開始したいと思うかもしれません。 誰かがreact-native-bootstrap（ちなみにまだ存在していません）を作成するまで、次のブートストラップ（取得しますか？）に使用できる他のReactNativeUIツールキットがいくつかあります。 ReactNativeプロジェクト。

ライブラリ

比較対照するライブラリ（アルファベット順）は次のとおりです。

  • awesome-react-native-1回限りのコンポーネントとネイティブモジュールのリスト
  • MaterialUI-マテリアルデザインをネイティブに反応させる
  • NativeBase-ReactNativeに不可欠なクロスプラットフォームUIコンポーネント
  • React NativeElements-クロスプラットフォームのReactNativeUI Toolkit
  • Shoutem-ReactNativeアプリケーション用のカスタマイズ可能なコンポーネントのセット

これらの一部には、create-react-native-appの背後にあるテクノロジーであるExpoを使用して表示できるデモアプリケーションがあります。 iPhoneまたはAndroidでExpoアプリをダウンロードして開き、ブラウザでUI ToolkitのExpoリンクをクリックし、QRコードスキャナーを使用して携帯電話でデモアプリを開きます。

コンポーネントカテゴリ

コンポーネントカテゴリは、すべてのコンポーネントを一覧表示することなく、ライブラリに含まれるコンポーネントを示すために使用されます。 可能なカテゴリのリストは次のとおりです。 ライブラリに各カテゴリで指定されたコンポーネントの大部分がない場合、そのカテゴリは存在として示されません。

  • 入力：ボタン、入力フィールド、チェックボックスなど。
  • 高度な入力：日付ピッカー、オートコンプリート、ファイルアップローダー
  • インジケーター：バッジ、進行状況インジケーター、トースト、スナックバー
  • ナビゲーション：メニュー、タブなど。
  • ダイアログ：ダイアログ、モーダル、ポップオーバー
  • レイアウト：引き出し、リスト、カード、グリッド、タイポグラフィ

awesome-react-native

以下のより頑丈なライブラリに入る前に、awesome-react-native githubリポジトリにあるこの広範なコンポーネントリストを使用して、コンポーネントの独自の寄せ集めを作成することが完全に可能であることに注意してください。 これらのプラグアンドプレイコンポーネントをできるだけ少なくまたは多く使用して、ReactNative開発エクスペリエンスを生産的で楽しいものにします。

マテリアルUI

ReactNative用のMaterialUI ツールキットは複数あり、見た目は非常に似ていますが、 HUGE の違いが1つあります。私が見つけたのは、ONEだけです。 iOSとAndroidの両方で：react-native-material-kit。 Material はGoogleがAndroidプラットフォーム用に開発したため、そこにあるライブラリのほとんどはAndroidのみです。 ただし、このツールキットを使用すると、iOS上でもReactNativeアプリケーションにAndroid固有の感覚が与えられることに注意してください。 ユーザーの大多数がiOSUXに慣れていると予想される場合は、これを考慮に入れてください。

Androidのみのライブラリに問題がなく、iOSの互換性について心配していない場合は、 react-native-material-design をチェックしてください。このライブラリには、入力、インジケーター、一部のレイアウトなど、より多くのコンポーネントが含まれています。

NativeBase

NativeBase には、コンポーネントの方法で提供する多くの機能があります。そのデモアプリは、理由からキッチンシンクと呼ばれています。 このライブラリは、プラットフォーム固有のスタイルを使用してデバイスに合わせて調整し、iOSとAndroidUXのバランスをうまくとることができます。 それらのコンポーネント構造は直感的であり、ドキュメントは素晴らしく、Web全体からの例がたくさんあります。 間違いなく私のリストの上位にランクされています。

ネイティブ要素に反応する

React Native Elements は、このまとめのUIツールキットの中で最も人気があり、最もフル機能を備えています。 React Native Elementsは、iOSまたはAndroid固有のスタイルをコピーしようとせず、代わりに独自の組み合わせを作成する数少ない要素の1つです。 他のReactNativeUI Toolkitよりもはるかにカラフルです。これは、大胆になりたい場合に便利です。 優れたドキュメントがあり、未解決の問題は比較的少ないです。

シャウテム

Shoutem は、このラウンドアップの他のツールキットよりもはるかに洗練されたデザインのUIツールキットであり、iOSスタイルのガイドラインにさらに傾いています。 あなたがエレガントを求めているなら、これは正しい選択かもしれません。 ただし、Shoutemの最もユニークな点の1つは、React Nativeの上にあるアプリを開発するためのプラットフォーム全体を提供し、提供する40以上の公式拡張機能に加えて、一連の拡張機能としてアプリを作成することを奨励することです。 。 Shoutem UI Toolkitを使用するために必要ではありませんが、それが次のアプリで行きたい方向であるかどうかを確認する価値があります。

まとめ

このラウンドアップでReactNativeUI Toolkitのいずれかを使用することから、awesome-react-nativeを介してコンポーネントのグラブバッグを統合することまで、どちらのルートを選択しても、巨人の肩の上に立つと、次のReactNativeアプリケーションをオフにするのに役立ちます素晴らしい、そしてスタイリッシュなスタートへ。