search
LoginSignup
6

More than 5 years have passed since last update.

posted at

updated at

React Native - Examples/UIExplorer

React Nativeで開発していて、困ることの一つにUIコンポーネントがどのように動くのかドキュメントを読むだけではわからないことです。そこで、React Nativeのレポジトリの中にExamples/UIExploreというサンプルが入っていて、それをシミュレーターで動かすことで動きを確認することができます。

Examples/UIExplorer

Install

git cloneしてnpmモジュールをインストールする。

 $ cd /tmp
 $ git clone git@github.com:facebook/react-native.git
 $ cd react-narive
 $ npm install

起動方法

iOS

XcodeからExamples/UIExplorer/UIExplorer.xcodeproj/を開いて、Runする。

スクリーンショット 2015-12-22 7.21.40.png

propertyの情報とそのUIを確認できる。

スクリーンショット 2015-12-22 7.23.59.png

Android

3日目のエントリのReact Native - Android開発のはじめの方で説明したようにSDK等をインストールしておく。Examples起動には別途、NDKが必要なので、ここからダウンロードして、展開する。

 $ chmod a+x android-ndk-r10e-darwin-x86_64.bin
 $ ./android-ndk-r10e-darwin-x86_64.bin

これをsdk同様に/usr/local/optあたりに配置。(optは../Cellarへのシンボリックリンクだったので同じように作る。

 $ cd /usr/local/Cellar
 $ mkdir android-ndk
 $ mv ~/Download/android-ndk-r10e /usr/local/Cellar/android-ndk/r10e
 $ cd /usr/local/opt
 $ ln -s ../Cellar/android-ndk/r10e android-ndk

.bash_profileに環境変数を追加

# .bash_profile
export ANDROID_NDK=/usr/local/opt/android-ndk

Genymotionなどのデバイスを起動後に下記のコマンドでUIExplorerをPush。

$ cd /tmp/react-native
$ source ~/.bash_profile
$ ./gradlew :Examples:UIExplorer:android:app:installDebug

すると、アプリ一覧に表示されるので起動する。

スクリーンショット 2015-12-22 8.00.24.png

スクリーンショット 2015-12-22 7.58.32.png
スクリーンショット 2015-12-22 7.58.57.png

Summary

今回はExamples/UIExplorerを説明しました。設計時にどのUIコンポーネントを使うかを考えるのに非常に便利なデモアプリです。React Nativeのバージョンが上がるとコンポーネントも増えてる可能性があるので、最新のものを適宜見ていくのが良いと思います。

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
What you can do with signing up
6