React Native のアプリ開発では、Cordova+React での開発時のように、Google Chrome の開発者ツールが使えないので、別途ソフトを導入しました。
導入したのは「Reactotron」で、公式サイトはこちら。
Reactotron – Inspect your React and React Native apps • Infinite Red Logo Light
https://infinite.red/reactotron
主に API との通信内容を確認するのに使っていますが、かなり良い感じです！
導入方法は、まず GitHub のリリースページから、任意のデスクトップアプリをインストールします。
Releases · infinitered/reactotron · GitHub
https://github.com/infinitered/reactotron/releases
次に、プロジェクトのディレクトリ直下で下記のコマンドを実行します。
npm i --save-dev reactotron-react-native
コマンドの実行が完了したら、任意の場所に ReactotronConfig.js というファイルを作成します。
内容は下記のとおりです。
import Reactotron from 'reactotron-react-native' import AsyncStorage from '@react-native-async-storage/async-storage'; Reactotron .setAsyncStorageHandler(AsyncStorage) .configure() .useReactNative() .connect()
ちなみに、こちらのコードはインストール手順のページに載っていたものをそのまま転載しているだけです。
ファイルの作成が完了したら、index.js を開きます。
そして、下記の一文を追加してください。
import('./ReactotronConfig').then(() => console.log('Reactotron Configured'));
なお、ファイルパスは自分の環境に合わせて適宜修正してください。
最後に、プロジェクトのディレクトリ直下で下記を実行します。
adb reverse tcp:9090 tcp:9090
作業は以上で完了です！
あとは Reactotron のアプリを開き、react-native run-android や react-native start 等のコマンドでアプリを実行してください。
設定が完了していれば、アプリが起動したタイミングで Reactotron と接続され、Timeline のタブにログが表示されます！
私は最後に実行する adb reverse tcp:9090 tcp:9090 を忘れていたためか、全然アプリをソフトが接続されずハマってしまったのですが、再度インストール手順を見直してこのコマンドを実行したところ、成功しました。
Android デバイスやエミュレータを使っている場合は、上記のコマンドを実行して Reactotron に接続できるか確認したほうがいいみたいです。
以上、React Native で開発したアプリをデバッグするためのアプリ「Reactotron」の導入方法についてのご紹介でした。
ご参考になれば幸いです。
