15 2020年に知っておくべきReactネイティブコンポーネントライブラリ

知っておくべきReact Nativeコンポーネントライブラリ


React Nativeコンポーネントライブラリは、次のアプリプロジェクトに取り掛かっているときに、大幅に時間を節約できます。どうして?さて、React自体から始めましょう。 Reactは、Webベースのアプリとモバイルアプリの両方のユーザーインターフェイスの構築に役立つオープンソースのJavaScriptライブラリであることをご存じでしょう。アプリにすぐに使用できる多数のコンポーネントが含まれています.

通常、Reactでコンポーネントを作成するときは、ターゲットとするプラットフォームのガイドラインに合わせてコンポーネントをスタイルする必要があります。そこが リアクトネイティブ 助けられる。これは、ターゲットプラットフォームのネイティブ機能とともにReactを使用してモバイルアプリを開発するために使用できるフレームワークです。.

以前に、最高のUIコンポーネントライブラリとフレームワークを取り上げた投稿を書きました。この投稿では、React Nativeコンポーネントライブラリを詳しく見ていきます。.

今年のベストReact Nativeコンポーネントライブラリ

1. NativeBase

Best React Nativeコンポーネントライブラリ#1:NativeBase

さまざまなプラットフォーム向けにReactコンポーネントを書き換えている場合は、動的なフロントエンドフレームワークであるNativeBaseを試してみてください。ライブラリは必須のクロスプラットフォームReact Nativeコンポーネントのコレクションであり、アプリの構築を開始するのに適した場所です。コンポーネントは、カスタマイズ可能なプロパティを持ついくつかのJavaScript機能を組み合わせたReact Nativeで構築されています。サードパーティのネイティブライブラリをそのまま使用することもできます.

NativeBaseは完全にオープンソースであり、12,000以上のスターを持っています Github. ただし、より多くの機能と画面が追加されるため、テーマは非常に重要になります。 NativeBaseが利用可能になりました ウェブユーザー あまりにも。同じJavaScriptコードベースを使用し、AndroidとiOSのプラットフォーム固有のデザインを使用して、アプリのネイティブなルックアンドフィールを実現できます。彼らのオープンソースプロジェクトには、ネイティブスターターアプリ、Twitterクローンアプリ、ToDoアプリ、チュートリアルアプリが含まれています。プレミアムバスケットには、予約、レンタル、求人情報、メッセージングなどのスターターアプリがあります。.

2. マテリアルキットReact Native

Best React Nativeコンポーネントライブラリ#2:material-kit-react-native

Material Kit React Nativeは、マテリアルデザインを備えた無料のネイティブアプリテンプレートを提供しています。で構築 Galioフレームワーク, 最も一般的なコンポーネントを再設計して、物事を最小限に抑え、Googleのマテリアルデザインと調和します。使い方は簡単で、ボタン、カード、ナビゲーション、入力などの200以上の手作り要素が含まれています。すべてのコンポーネントは、テーマに変更を加えることにより、カラーバリエーションを取ることができます。さらに、5つのカスタマイズされたプラグインと5つのサンプルページがあります。.

200近くの星 Github, それは提供しています プロ版 また、より多くのサンプルページやドキュメントにアクセスできます.

3. React Native Elements

Best React Nativeコンポーネントライブラリ#3:react-native-elements

React Native Elementsは、クロスプラットフォームのReact Native UIツールキットであり、開発者が作成した多数の優れたオープンソースUIコンポーネントを1か所にまとめています。 React Native Elementsによってまとめられたパッケージに浸ることができ、APIのルックアンドフィールが一貫していることを確認してください。それが17,000個の星を受け取ったことは驚くべきことではありません Github.

パッケージには、価格、バッジ、オーバーレイ、ディバイダー、プラットフォーム固有の検索バーなどのコンポーネントのバスケット全体が含まれています。それらは使いやすく、本当にカスタマイズ可能です。すべてのコンポーネントの小道具は1つの中央の場所で定義されているため、コンポーネントを簡単に更新または変更できます。さらに、商用のReact Nativeアプリを開発している小さなチームとオープンソースの貢献をつなぐプラットフォームとしても機能します。.

React NativeをWebベースのプロジェクトに使用するには、 React Native Web. JavaScriptで高速なアダプティブUIの作成を可能にし、React Devツールと統合します。 React NativeアプリとWebアプリの間でコードベースを共有できるようになります。入力モードとして、タイプ、クリック、スワイプをサポートし、組み込みのアクセシビリティとRTLサポートを備え、Twitter、Uber、Flipkartなどで使用されます.

4. React Nativeのくじ

くじ

LottieはAirbnbのモバイル用ライブラリで、アプリにアニメーションを追加するのに役立ちます。通常、Adobe After Effectsでアニメーションを作成した後、アニメーションをWebアプリで使用できる形式に変換する必要があります。ロッティはこれであなたを助けます.

After Effects拡張機能のBodyMovinからJSON形式でアニメーションデータをエクスポートすることで機能します。この拡張機能は、WebでアニメーションをレンダリングするためのJSプレーヤーにバンドルされています。 React Nativeでも動作し、公式ドキュメントにアクセスできます Github 12,000近くの星を獲得しています.

Lottieライブラリとプラグインは 無料で利用可能, 厳選されたアニメーションファイルのコレクションを使用して、アプリを魅力的で興味深いものにすることができます。アニメーションファイルはサイズが小さく、ベクター形式です。そのため、アプリのパフォーマンスに影響を与えることはありません。同時に、UIに刺激を与え、視覚的に魅力的なものにすることができます.

5. React Native Vector Icons

反応ネイティブベクトルアイコン

アプリで使用するアイコンが必要な場合、これは最高のReact Nativeコンポーネントライブラリの1つです。 3,000以上のアイコンのライブラリを使用すると、ニーズに合ったものを確実に見つけることができます。さらに、アイコンをプロジェクトに統合しながら、アイコンをカスタマイズ、スタイル設定、拡張することが可能です。.

パッケージは、TabBarとToolbar Android、および画像ソースとマルチスタイルフォントをサポートしています。星12,000近く Github, ボタン、ロゴ、ナビゲーションバーに最適です。それを利用する React Nativeのアニメーションライブラリ 任意のアイコンと組み合わせて、アニメーションコンポーネントを作成します。関連するCSSファイルを含むアイコンフォントがすでにある場合は、generate-iconスクリプトを使用してアイコンセットを簡単に生成できます.

6. Ignite CLI

点火する

Ignite CLIは、React Nativeアプリ用の確実なスターターキットです。まったく無料で、デフォルトのReact Nativeボイラープレートはネイティブアプリの構築を簡単に支援します。簡単にインストールでき、ボイラープレートをプロジェクトに適合させながら、その構築におけるベストプラクティスに準拠します。デフォルトでは、AndroidとiOSの両方で動作します。スタンドアロンプ​​ラグインもサポートされています.

さらに、多数のボイラープレートから選択することも、独自のボイラープレートを開始することもできます。モジュラープラグインシステムを使用すると、アプリケーション機能を追加したり、独自の機能を記述したりできます。使用例の画面は、サードパーティのライブラリをテストし、複数のコンポーネントで構成されるアプリを構築するのに役立ちます。画面には、基本的なコンポーネントで構築された一般的に使用されるアプリの例も含まれています。コンポーネントを識別して簡単に変更できるように、この画面では例をコンポーネントのファイルに登録します。この画面から、コンポーネントをテスト、使用、およびチームと共有できます。 Ignite CLIは10,000以上のスターを獲得しています Github.

7. React Native Mapview

反応ネイティブマップ

AndroidおよびiOS用のマップコンポーネントを提供するReact Nativeコンポーネントライブラリの1つは、React Native Mapviewです。その構造は、マーカーやポリゴンなどのマップ上の通常のフィーチャがMapviewコンポーネントの子として指定されるようなものです。これにより、APIがマップ上の機能を宣言的に直感的に制御できるようになります。あなたの側では、GoogleコンソールでGoogle Maps APIを有効にする必要があります.

マップスタイルをカスタマイズするためにできることはたくさんあります。マップビューの位置を変更したり、地域や場所を追跡したり、Googleマップで興味のあるポイントをクリックしたりできるようになります。指定したマーカーまたは座標へのズームインを有効にしたり、アニメーション化することもできます。プロップにアニメーション領域の値を割り当てると、MapviewはAnimated APIを利用してマップの中心とズームを制御できます。カスタムマーカーを指定しない限り、デフォルトのマーカーがレンダリングされます.

クールなのは、マーカーがドラッグ可能で、画像を使用してカスタマイズでき、ドラッグ中に他のUIが更新されることです。さらに必要な場合は、マーカー、ポリゴンクリエーター、サークルおよびポリゴンオーバーレイへのカスタムコールアウトがあります。 iOSユーザーはグラデーションポリラインを作成できます。星が10,000個以上あることは当然のことです Github.

8. React Nativeの才能のあるチャット

反応ネイティブギフトチャット

名前が示すように、React Native Gifted Chatは、React Native(およびWeb)のチャットUIのセットアップに役立ちます。 TypeScriptで記述され、完全にカスタマイズ可能なコンポーネントが含まれているため、以前のメッセージを読み込んだり、メッセージをクリップボードにコピーしたりできます。ユーザーがキーボードをスキップするのに役立つInputToolbarもあります.

ユーザーエクスペリエンスを向上させるために、ユーザーのイニシャル、ローカライズされた日付、複数行のTextInput、クイック返信メッセージ(bot)、システムメッセージとしてアバターを有効にします。 Reduxのサポートもあります。 Gifted Chatには8,000以上のスターがあります Github.

9. React Native UI Kitten

反応ネイティブUI子猫

eコマースを含むあらゆるドメインのモバイルアプリのスターターキットとして使用できるReact Nativeコンポーネントライブラリの1つは、React Native UI Kittenです。これは、 Eva Designシステム. 5,000以上の星の評価 Github, 同じようにスタイル設定された約20の汎用コンポーネントのセットを提供して、視覚的な外観を処理.

この永遠に無料のオープンソースライブラリを使用すると、コンポーネントのソースコードを変更することなく、提供されているテーマを使用したり、独自のテーマをいくつでも作成したりできます。さらに、ページをリロードする必要なしに、ランタイムで暗いテーマと明るいテーマを切り替えることができます。 NPMからUI Kittenパッケージをインストールしたら、コンポーネントをインポートして、プロジェクトでの使用を開始できます.

10. React Native Paper

反応する

もう1つの無料のオープンソースライブラリは、React Native Paperです。すべての主要コンポーネントがあり、これらのコンポーネントはGoogleのマテリアルデザイン基準に準拠して設計されています.

Paperはクロスプラットフォームであり、Webとモバイルの両方で機能します。ほとんどすべてのユースケースシナリオに適合するコンポーネントと相互作用があります。アニメーション、アクセシビリティ、UIロジックなど、ほとんどの詳細が処理されます。デフォルトの色をカスタマイズしたり、独自に作成したりできます。さらに、完全なテーマ設定のサポートと、ダークモードとライトモードを切り替えるオプションがあります。オン Github, 4,000以上の星を.

11. React Native Material Kit

反応ネイティブ材料キット

React Nativeコンポーネントライブラリのリストの次は、マテリアルデザインをReact NativeにもたらすUIコンポーネントの別のセットです。内部には、ボタン、カード、範囲スライダー、テキストフィールドがあります。読み込みを表示するスピナーとプログレスバー、スイッチ、ラジオボタン、チェックボックスの切り替えも表示されます.

必要なのは、マテリアルデザインライトのデフォルトテーマに準拠した定義済みビルダーを使用してボタンを追加するための数行のコードです。ビルダーを使用して、カスタマイズされたボタンを一から作成することもできます。組み込みテキストフィールドの場合も同様です。それだけでなく、グローバルテーマを変更してスタイルをカスタマイズできます。これは、アプリ全体のすべてのチェックボックスとラジオボタンに影響します。オン Github, このライブラリは4,700の星を獲得します.

12. React Native Material UI

反応ネイティブ材料UI

React Native Material UIは、React Native向けに約20のコンポーネントを提供します。コンポーネントには、アクションボタン、アバター、サブヘッダー、引き出し、仕切り、ツールバーなどが含まれます。これらのコンポーネントは高度にカスタマイズ可能であり、その構成で材料設計を使用します。テーマに対して行ったカスタマイズは、独自に構築したものを含め、他のコンポーネントにも拡張できます。必要に応じてスタイルを上書きすることにより、ローカルの変更を行うことができます.

React Native Vector Iconsを既に使用している場合は、インストールによって行うことはほとんどありません。そうでなければ、ダウンロードする必要があります Androidの素材アイコン そしてあなたが持っていることを確認してください Roboto iOS用。このライブラリは3,000以上のスターを獲得しています Github.

13. RNUILIB

rnuilib

このキットには60を超えるコンポーネントが含まれているため、RNUILIBは約2,000の星を Github. すべてのコンポーネントのライブサンプルが含まれているため、プロジェクトで使用する前に、使用可能なオプションを確認できます.

コンポーネントには、アニメーション画像、進行状況を示すスキャナー、プロフィール画像を表示するアバター、基本的なボタン、グラデーションスライダーコンポーネントなどがあります。.

14. ナチョスUI

ナチョスUI

JavaScriptまたはReact Nativeプロジェクトで使用できる既製のコンポーネントが30以上あるNachos UIは、1,900以上の星を獲得します Github. 本当に役立つのは、コンポーネントのスタイリングについてあまり心配する必要がないことです。あなたがしなければならないのは、あるコンポーネントから別のコンポーネントに事前にスタイル設定された入力をインポートすることです。 Nachos UIキットをインストールした後、必要なコンポーネントを選択し、対応するReact Nativeコードをインポートしてから、プロジェクトに合わせてカスタマイズします。.

この無料のオープンソースでコミュニティ主導のソフトウェアは、PhotoshopとSketchのデザインを共有および検査するためのフル機能のツールであるAvocodeを使用しています。のおかげで React Native for web, Webベースのプロジェクトにも使用できます.

15. Shoutem

shoutem

Shoutemは、WordPressのプラグインを使用してWebサイトを構築するような、拡張機能またはモジュール式の構築ブロックを使用して機能するアプリ構築プラットフォームです。 40以上のフル機能の拡張機能により、450以上のスターが集まります Github. 拡張機能には、写真やビデオ、製品、イベント、レストランメニューなどのギャラリーが含まれます。これらのオープンソース拡張機能をアプリで自由に使用できます。そして、それらをフォークするだけで、好きなように変更できます.

Shoutemは、分析、ユーザー認証、レイアウト、プッシュ通知など、多くのモバイルバックエンドサービスを提供します。さらに、コード化された多くのテーマを使用してカスタマイズできます。 Shoutemは100%JavaScriptとReact Nativeを使用しています.

これが、最高のReact Nativeコンポーネントライブラリのリストです。どれがあなたのピックですか?コメントで共有.

これらの記事にも興味があるかもしれません:

  • アプリ開発用の無料のReactネイティブテンプレート

WordPressサイトの高速化に関する速習コースに参加することを忘れないでください。いくつかの簡単な修正により、ロード時間を50〜80%も短縮できます。

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map