えにあです。
WindowsでReactNative入門~アプリ開発編~の1日目です。
この記事は和田さんのUdemyの講座を参考にしています。
www.udemy.com
講座は非常にわかりやすい内容で、特にReact経験者であればすぐに理解できると思います。 しかしながら、現在のバージョンとの環境差異であったり、MacとWindowsの違いであったり、コーディングスタイルの好みの違いがあったので、自分なりにアレンジにした開発の過程を記録していきます。
目次
出来上がりイメージ
こんな感じのアプリを作ります。
環境
Windows10 HomeEdition
expo 4.11.0
node.js 4.17.6
VSCode
Typescript
プロジェクト作成
では早速始めていきましょう。
作業ディレクトリはどこでも構いません。私はD:Learningの下で作業をしています。
Windows PowerShellを起動して、expo init news-app
と入力します。
選択肢が表示されるので、blank (Typescript)を選択します。
PS D:\Learning> expo init news-app ? Choose a template: » - Use arrow-keys. Return to submit. ----- Managed workflow ----- blank a minimal app as clean as an empty canvas > blank (TypeScript) same as blank but with TypeScript configuration tabs (TypeScript) several example screens and tabs using react-navigation and TypeScript ----- Bare workflow ----- minimal bare and minimal, just the essentials to get you started
自動的に必要なライブラリのインストールなどが始まります。 1分ほどで完了し、以下の内容が表示されます。
√ Choose a template: » blank (TypeScript) same as blank but with TypeScript configuration Downloading and extracting project files. 🧶 Using Yarn to install packages. Pass --npm to use npm instead. Installing JavaScript dependencies. ✅ Your project is ready! To run your project, navigate to the directory and run one of the following yarn commands. - cd news-app2 - yarn start # you can open iOS, Android, or web from here, or run them directly with the commands below. - yarn android - yarn ios # requires an iOS device or macOS for access to an iOS simulator - yarn web
これで、空のプロジェクトが作成されました。
ここでは選択肢の違いを詳しくは説明しませんが、javascriptを使う場合はblank、Typescriptを使う場合はblank(Typescript)を選択します。
規模の小さいプログラムであればjavascriptでもよいですが、中規模以降になるとTypescriptで型付けを行った方がメンテナンスしやすいと私は考えておりますので、Typescriptを採用します。
エミュレータで起動してみる
さて、作成した空のプロジェクトは中身のないアプリですが、それでも立派なアプリです。つまり起動することができます。早速Androidエミュレータ上でこのアプリを起動してみましょう。
まずAndroidエミュレータを起動しましょう。 環境構築編でエミュレータの設定は完了していますね。 前回はAndroid Studioからエミュレータを起動しましたが、今回はコマンドで起動してみましょう。
まず、エミュレータの名前を調べるためにemulator -list-avds
を実行します。このコマンドは、今までに作成したエミュレータの一覧を表示するコマンドです。
PS D:\Learning> emulator -list-avds
Pixel_5_API_30
ここで、環境構築編で作成したエミュレータが表示されるはずです。私の場合はPixel5で作成したので上記のように出力されました。
エミュレータの名前がわかったのでこのエミュレータをemulator -avd エミュレータ名
で起動します。
PS D:\Learning> emulator -avd Pixel_5_API_30 emulator: Android emulator version 30.8.4.0 (build_id 7600983) (CL:N/A) handleCpuAcceleration: feature check for hvf added library vulkan-1.dll Failed to open /qemu.conf, err: 2 Windows Hypervisor Platform accelerator is operational emulator: INFO: GrpcServices.cpp:315: Started GRPC server at 127.0.0.1:8554, security: Local emulator: INFO: EmulatorAdvertisement.cpp:93: Advertising in: C:\Users\heart\AppData\Local\Temp\avd\running\pid_8144.ini emulator: ERROR: AdbHostServer.cpp:102: Unable to connect to adb daemon on port: 5037 Your emulator is out of date, please update by launching Android Studio: - Start Android Studio - Select menu "Tools > Android > SDK Manager" - Click "SDK Tools" tab - Check "Android Emulator" checkbox - Click "OK"
エミュレータが起動すればOKです。
次に、作成したプロジェクトディレクトリに移動しexpo start
を実行します。
PS D:\Learning> cd news-app PS D:\Learning\news-app> expo start
すると、ブラウザが起動し、以下の画面が表示されるので、Run on Android device/emulatorをクリックします。
このような画面が表示されれば成功です!
おわりに
今回は空のプロジェクトを作成し、エミュレータで空のアプリを起動させました。
次回は独自のアプリを作り始めていきます。
今回はここまで!
Something went wrongと表示された場合
私の場合、以下のようなエラー画面が表示されてしまいました。
この解決方法でめちゃくちゃはまりました。
色々原因があるのですが、私の場合ググっても出てこない原因でした。
Network response timed outと表示されていますが、どうやらエミュレータ側から、expoの待ち受けポートである19000に接続できていないようです。
対策① ネットワークプロファイルをプライベートにする
ネットワークプロファイルは以下のようにプライベートを選択してください。
対策② ポート重複を解消する
対策①で解決しない場合、expoの待ち受けポートである19000番を別のプロセスが使用している可能性があります。
netstat -aon | find '"19000"'
を実行し、19000番ポートを使用ているプロセスを調べます。
1228と5808の二つプロセスが19000でLISTENしていることがわかります。
PS D:\Learning> netstat -aon | find '"19000"' TCP 0.0.0.0:19000 0.0.0.0:0 LISTENING 5808 TCP 0.0.0.0:19000 0.0.0.0:0 LISTENING 1228 TCP [::]:19000 [::]:0 LISTENING 1228
PIDからプロセスを調べます。node.exeがexpo startで起動したプロセスです。
windowsが起動しているsvchostとポートが重複しているようです。
PS D:\Learning\news-app> tasklist | findstr "1228 5808" svchost.exe 5808 Services 0 9,608 K node.exe 1228 Console 1 107,260 K
その場合は、expo start --port 空きポート番号
で、ポート重複を回避します。
expo start --port 19010
対策③ tunnelを使う
LANをtunnelに変更すると、とりあえず動くかもしれません。