備忘録
概要
React Nativeとfor webでiOS + Webを作っているプロジェクトがあります。
そのプロジェクトでついでにAndriodもやりたいって話。
でもちゃんと書いてるプロジェクトにいきなり突っ込んでもうまく行く気がしない。
一度まっさらのiOS + Webのプロジェクトを作ってそこに突っ込んでみる。
※React Nativeとかその辺の話はしません。
About Me
| 技術 | 練を見せろ(どんなもんか) |
|---|---|
| Web | 仕事でやってるざーこざこ。 |
| iOS | 個人で一回リリースしたくらい。 |
| Android | はじめて。何も知らない。 |
環境など
| もの | バージョンなど |
|---|---|
| Mac(M1) | 13.1 |
| Pixel 6a | 13 |
| React Native | 0.71.5 |
本題
1. RN+for Webの新規プロジェクト作成
割愛
2. Andriodのセッティング
Node & Watchman
済
Java Development Kit
brew tap homebrew/cask-versions
brew install --cask zulu11
特になにもなく。
パスワード求められたくらい。
Android development environment
Install Android Studio
Download and install Android Studio.While on Android Studio installation wizard, make sure the boxes next to all of the following items are checked:
- Android SDK
- Android SDK Platform
- Android Virtual Device
ここっぽいけどチェックできない。
仕方ないけどNext。
Some required components are not available. You can continue, but some functionality may not work correctly until they are installed.
一旦スルーする。
Install the Android SDK
SDK ManagerからAndroid 13 (Tiramisu)をインストール。
見えたままにインストールするとGoogle APIs ARM 64 v8a System Imageが抜けていたので追加でインストール。
Next, select the "SDK Tools" tab and check the box next to "Show Package Details" here as well. Look for and expand the "Android SDK Build-Tools" entry, then make sure that 33.0.0 is selected.
33.0.2がインストールされていたので33.0.0をインストールし直す。
Configure the ANDROID_HOME environment variable
The React Native tools require some environment variables to be set up in order to build apps with native code.
Add the following lines to your ~/.zprofile or ~/.zshrc (if you are using bash, then ~/.bash_profile or ~/.bashrc) config file:
export ANDROID_HOME=$HOME/Library/Android/sdk
export PATH=$PATH:$ANDROID_HOME/emulator
export PATH=$PATH:$ANDROID_HOME/platform-tools
echo $PATHで確認し、問題なし。
エミュレータで起動
Metro起動済み。
npx react-native run-android
com.android.builder.testing.api.DeviceException: No connected devices!
Android StudioにVirtual Device Managerなるものがあったのでデバイスを作成し起動。
エミュレータが立ち上がってる状態で再度run-androidすると起動できました。
Metroのリロードでどっちもチカっとしてかっこいい。
3. 実機で起動
超簡単!!!!!!
- Pixelで開発者向けオプションを有効化。
- PixelでUSBデバッグを有効化。
- USBでMacと接続して
run-androidで起動できました。
iOSと比べてお手軽すぎた。
もちろんホットリロードも効きます。
~fin~