React Nativeの環境構築でのエラーを解決した方法

React Nativeの学習を開始し、環境構築を行っていたところエラーが出てしまいました。
環境構築はこちらの流れに沿ってReact Native CLI Quickstartで行いました。

①まず、次のコマンドを打つとReact Nativeのセットアップが完了し、AwesomeTSProjectディレクトリーが作成されます。

npx react-native init AwesomeTSProject --template react-native-template-typescript

②AwesomeTSProjectディレクトリーに移動します。

cd AwesomeTSProject
npx react-native run-ios

これでアプリが立ち上がれば開発環境の構築は完了なのです。

しかし、次のようなエラーが起こってしまいました。

エラー内容

どうやらNodeサーバーが立ち上がっていないようです。

解決方法

①node.jsのサーバーが立ち上がっていないようなので、ターミナルで起動してみました。

npm start

しかし、ポートが衝突しているようです。

error listen EADDRINUSE: address already in use :::8081.

②ポートを特定して、消去する。

// ポートを特定する
losf -i 8081

// PIDを指定して消去する
kill -9 *****  // *****にはPIDの数字を入力してください

③もう一度iosで立ち上げます。

npx react-native run-ios

無事にアプリが立ち上がりました！

参照

ビルド失敗：Error: listen EADDRINUSE: address already in use :::4000
React Nativeの環境構築でつまずいた話：Error: listen EADDRINUSE