スマホアプリを作ってみようと思い立ち、React Nativeを学んでみることにしました。
いろいろなサイトを見てみましたが、結論から言うと、公式サイトが一番で、十分です。
はじめは検索で出てくるQiitaとか参考にして開発環境を整えようと思ったのですが、これが間違いでした。
Qiitaのページの通りにやっても全然うまくいきません。
情報が古いのか、その通りにやるとエラーだらけ。
Goodみたいなのいっぱいついてたのに。
正直ちょっとあきらめかけました。
よく見たら公式サイトにイントールガイドもあったので、そちらを参考にすることに。
公式サイトの通りにすると、驚くほどスムーズにいきました。
↓こちらが公式サイトの環境構築ページへのリンクです。
初心者ということで、Expoを使うことにしました。
Expoでのデバッグ
Expoでのデバッグは以下のリンクから。
Chromeの開発者ツールを使います。
手順としては、まずはデバイスでアプリを起動しておきます。
次にデバイスで開発者メニューを開きます。
デバイスの種類によって方法が違います。
たとえばAndroidエミュレーターの場合はエミュレーター上でCmd(Ctrl) + mを押すか、ターミナルでadb shell input keyevent 82を実行します。
するとChromeでページが開くので、そのページでChrome開発者ツールを開けばデバッグできます。
開発者ツールのSourcesタブのdebbugerWorker.***.jsの長～いリストの中に自分で書いたスクリプトもあるので、そこでブレークポイントを設定したりできます。
Expoでテストを書く
React NativeはJestに対応していますが、Expoで開発を始めた場合自分で追加する必要があります。
まずはJestを追加。
そしてExpoのサイトに従ってJest-expoも追加します。
Testing with Jest - Expo Documentation
これでOK！と思ったら、何やらエラーが。
検索して下記を試してみたらうまくいきました。
公式サイトに従えば何も考えなくていいと思ったのですが、油断できませんね。
npm install jest@latest --save-dev
Expoで開発する注意点
Expoで開発する場合、NativeCodeを用いるモジュールは使えません。
インストール時に react-native link が必須のモジュールがそれです。
代わりにExpoには標準で大概の機能のモジュールが用意されています。
↓公式ページに一覧があります。
