NativeでUIを整えてみようと思い今回導入してみました。ゴールとしては、NativeBaseのインストールから利用できるライブラリの一部である「ボタン」を表示しようと思います。まとめまずNaitiveBaseって?Geekyants.comというチームが作成したフロントエンドフレームワーク。Nativeで活用できるオープンソースのUIコンポーネントライブラリで、iOSおよびAndroidプラットフォーム用のネイティブモバイルアプリケーションが構築できます。プロジェクト作成がわからない方は、以下を参照ください。...https://westhillworker.com/react-native-start/Installしてみる以下コマンドを実行して、ReactNativeプロジェクトに適応する。link設定してみるAtom・vimコマンドなどで、ご自身が作成したプロジェクトを開きます。ReactNativeで起動時に読み込まれる以下ファイルにNativeBaseを読み込ませます。'native-base';今回は、iosでButtonを使いたいので、その辺りを中心にimportします。ここから実戦に入る前に、少しNativeBaseの概念について触れておきます。NativeBase概念NativeBaseはcontainerに基づいて独自のフレームコンポーネントを提供します。すべてのコンポーネントはコンテナ内に含める必要があり、Containerは主にheader、content、footerの3つのコンポーネントからなる。Containerに既存のスタイルシートが組み込まれており、必要があればカスタマイズをしましょう。styles部分をご自身のプロジェクトにコピーしてください。そのままコピーする場合は、NativeBaseSampleの部分をご自身が作成したプロジェクト名に変更してください。今回試しに「NativeBaseSample」クラスとしましたが、ご自身のプロジェクト名に変更すれば大丈夫です。NativeBaseSample);何種類かのボタンを配置してみました。確認してみるNativeBaseを読み込みUIができたら、確認してみましょう。run-android↓いくつかのボタンが色違いで表示されれば完了です。Listなど様々なサンプルコードがあるため、自身のプロジェクトに導入する際も基本的にはサンプルを真似して、個別に変更したいデザインは、スタイルシートで調整するのが良さそうです。Components集http://docs.nativebase.io/Components.html#Components英語ですが、ドキュメントは充実しています。まとめ今回は、初めてということもあり、プロジェクトにどうやって入れて、どのように利用するかを中心に進めてみました。フレームワークが優秀なため、あまり困ることがなくすんなり導入できました。ライブラリが豊富なので、他にも利用できそうなものは適応してみたいと思いました。Androidで表示も多少変わると思いますので、じっくり検証したいところです。最近ReactNativeで簡易なアプリを個人で開発しています。