2018年3月9日

プログラミング

React Nativeでコードを変更せずにCSSを修正する方法

目次

  1. はじめに
  2. react-native-debuggerとは
  3. react-native-debugger をインストールする
  4. react-native-debuggerを起動する
  5. シミュレーターを起動してDebug JS Remotelyを有効にする
  6. インスペクタで選択した要素のスタイルを修正する
  7. まとめ

はじめに

React NativeでCSSを修正する時はソースコードを変更してからシミュレーターをリロードして反映します。

Hot Reloadという機能を使うとリロードせずに変更を反映させることもできるのですが、
Chromeの開発者ツールのようにツール上でCSSを直接編集できた方が便利です。

React Nativeではreact-native-debuggerというツールを使うと同じようなことが可能なので、
その手順を本記事ではご紹介したいと思います。

react-native-debuggerとは

react-native-debuggerとは次の3つのライブラリを統合したReact Nativeのデバッグ用スタンドアロンアプリです。Mac, Windows, Linux版がそれぞれリリースされています。

  • react-devtools
  • redux-devtools-extension
  • React Native公式のRemote Debugger

今回ご紹介するCSS編集はreact-devtools の機能の一つです。CSS編集だけでなくpropsstateを変更したりすることも出来ます。Remote Debuggerをブラウザではなくアプリで一緒に確認できるので、React Nativeの開発を行う場合はreact-devtools単体よりも react-native-debuggerを使った方が便利です。

Reduxのデバッグ機能を利用するためには別途設定が必要なので本記事では触れません。

react-native-debugger をインストールする

こちらからOSに応じた実行ファイルをダウンロードしましょう。
https://github.com/jhen0409/react-native-debugger/releases

Macの場合は以下コマンドを実行するとHomebrew経由でインストールすることもできます。
お好みに合わせた方法でインストールしましょう。

$ brew update && brew cask install react-native-debugger

react-native-debuggerを起動する

Macの場合は以下のURLスキーマをコマンドで叩いて起動することが出来ます。

$ open "rndebugger://set-debugger-loc?host=localhost&port=8081"

Windowsの場合はURLスキーマに対応していないため react-native-debugger-open というライブラリを使う必要があります。

https://github.com/jhen0409/react-native-debugger/tree/master/npm-package

以下のような画面のアプリが立ち上がればOKです。
image.png (158.1 kB)

シミュレーターを起動してDebug JS Remotelyを有効にする

貼り付けた画像_2018_02_16_18_37.png (64.8 kB)

シミュレーター起動後、Debug JS Remotely を有効にするとreact-native-debuggerのアプリと接続されます。
以下の画面のようにReactのコードが表示されるようになっていればOKです。

image.png (121.0 kB)

インスペクタで選択した要素のスタイルを修正する

貼り付けた画像_2018_02_16_18_43.png (60.5 kB)

image.png (4.6 kB)

Show Inspectorを押して要素を選択してみましょう。

image.png (39.1 kB)

すると上記のように props, state, styleが表示されるので、値を変更して結果を確認することができます。

まとめ

以上、今回はReact Nativeでコードを変更せずにCSSを修正する方法をご紹介しました。

スタイルを修正したい時にかなり便利なツールだと思うので、
ぜひ普段の開発の際に使ってみてください。

0

0

AUTHOR

furuya エンジニア

サーバーサイド、フロントエンド、Unityと色々手を出してる雑食系エンジニア。ReactNativeが最近のマイブーム。

アプリでもっと便利に!気になる記事をチェック!

記事のお気に入り登録やランキングが表示される昨日に対応!毎日の情報収集や調べ物にもっと身近なメディアになりました。

簡単に自分で作れるWebAR

「palanAR」はオンラインで簡単に作れるWebAR作成ツールです。WebARとはアプリを使用せずに、Webサイト上でARを体験できる新しい技術です。

palanARへ
palanar

palanはWebARの開発を
行っています

弊社では企画からサービスの公開終了まで一緒に関わらせていただきます。 企画からシステム開発、3DCG、デザインまで一貫して承ります。

webar_waterpark

palanでは一緒に働く仲間を募集しています

正社員や業務委託、アルバイトやインターンなど雇用形態にこだわらず、
ベテランの方から業界未経験の方まで様々なかたのお力をお借りしたいと考えております。

話を聞いてみたい

運営メンバー

eishis

Eishi Saito 総務

SIerやスタートアップ、フリーランスを経て2016年11月にeishis, Inc.を設立。 マーケター・ディレクター・エンジニアなど何でも屋。 COBOLからReactまで色んなことやります。

sasakki デザイナー

アメリカの大学を卒業後、日本、シンガポールでデザイナーとして活動。

しまだ

しまだ デザイナー

WebAR/VRのデザインと3DCG制作がメインです。 肩書きは「アニメ案件に関わりたいデザイナー」。

Miu マーケター

ドイツでWEBマーケティングしています。

しんのき エンジニア

主に React Native を使ったアプリ開発と AWS や Firebase を使ったサーバーレスアーキテクチャを担当しています。元々はインフラとかPHPをやっていました。

yamakawa

やまかわたかし デザイナー

フロントエンドデザイナー。デザインからHTML / CSS、JSの実装を担当しています。最近はReact NativeやReact360をよく触っています。

furuya エンジニア

サーバーサイド、フロントエンド、Unityと色々手を出してる雑食系エンジニア。ReactNativeが最近のマイブーム。

Sayaka Osanai デザイナー

Sketchだいすきプロダクトデザイナー。シンプルだけどちょっとかわいいデザインが得意。 好きな食べものは生ハムとお寿司とカレーです。

はらた

はらた エンジニア

サーバーサイドエンジニア Ruby on Railsを使った開発を行なっています

うえまつゆい エンジニア

サーバーサイドエンジニアからフロントエンドエンジニアになりました。主にReact Nativeでのアプリ開発をしています。

kobori

こぼり ともろう エンジニア

サーバーサイドエンジニア。SIerを経て2019年7月に入社。日々学習しながらRuby on Railsを使った開発を行っています。

sasai

ささい エンジニア

フロントエンドエンジニア WebGLとReactが強みと言えるように頑張ってます。

damien

Damien

WebAR/VRを中心に企画やディレクションやエンジニアもちょっとやっています。森に住んでいます。

デザイナーゲスト

ゲスト デザイナー

CONTACT PAGE TOP