react native の 環境を準備する方法 (Android編)

react-native-init

tags: node react react-native android android-studio

---

React Native を始めるための手順

---

このドキュメントが対応しているバージョン

• Node 10.15.3
• Android Studio 3.3.2
• react-native-cli@2.0.1
• react-native@0.58.6
• react@16.6.3

---

node をインストール

• https://nodejs.org/ja/

---

---

AndroidStudio をインストール

• https://developer.android.com/studio/?hl=ja

---

---

---

---

環境変数 を設定

set ANDROID_HOME=C:\Users\${ユーザ名}\AppData\Local\Android\Sdk

---

AndroidStudioで System Image をインストール

• Google APIs Intel x86 Atom_64 System Image
  (system-images;android-28;google_apis;x86_64)
• Intel x86 Atom_64 System Image
  (system-images;android-28;default;x86_64)

---

---

---

AVD Manager で仮装端末を作成

optionalです。割愛します。

---

react-native-cli をインストール

npm install -g react-native-cli

---

react-native のプロジェクトを作成

react-native init ${プロジェクト名}

---

起動

react-native run-android

起動に成功すると、端末に「Welcome to React Native!」が表示されます。

---

トラブルシューティング

---

react-native run-android編

Unable to load script from assets 'index.android.bundle'.

index.android.bundle の出力先のディレクトリを作成

mkdir android/app/src/main/assets

index.android.bundle を作成

react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res

---

react-native bundle編

npm module が足りないという問題が起きる環境がありました。
インストールして解決できました。

npm install --save-dev @babel/core
npm install --save-dev @babel/runtime
npm install --save-deb scheduler

---