React Nativeのコンポーネントを詳しく見る

Tomoumi Nishimura 52views 更新:2017年6月14日

React Nativeのコンポーネントは仮想DOMとして表現されていますが、これを見るためにReact Developer Toolsというツールが用意されています。

導入方法

npmを利用します。

npm install -g react-devtools

利用方法

どこのディレクトリからでも良いので、以下のように呼び出します。

react-devtools

起動すれば、勝手につながります。

機能

1. DOMを見れる

ChromeのDeveloper Toolsみたいなノリで、DOMツリーを見ることができます。

2. インスペクタと連携させる

以下の手順でReact Nativeのインスペクタ機能を起動することで、インスペクタの代わりに動作してくれます。

  1. iOSシミュレーターなら⌘+D、Androidシミュレーターなら⌘+Mでメニューを呼び出す。
  2. “Toggle Inspector”からInspectorを起動する。
  3. Devtoolsを起動する。

この状態で、状態を見たいDOMをタップすると、Devtoolsが自動的にそのDOMを開いてくれます。

ここまで来ると、ChromeのDeveloper Toolsを利用してDOMを見ているのと同じ気分です。

ちなみに

参考

ログイン / 新規登録してコメントする

このソースコードをストックして後で利用したり、作業に利用したソースコードをまとめることができます。

こちらもお役に立つかもしれません