はじめに
react-nativeでの環境構築ですが、いろいろと準備することが多くてハマった際の問題切り分けが少し大変だった印象です。
まず、react-nativeでのアプリ作成にはExpoとreact-native-cliの２つがあるので、ググるときに気を付ける。前者の環境構築はかなり簡単です。
今回はWindowsでreact-native-cliを使ったアプリの環境構築手順と、AndroidStudioを用いたエミュレーターでの起動までを紹介します。
準備
PowerShellでChocolateyをインストール
Set-ExecutionPolicy Bypass -Scope Process -Force; iex ((New-Object System.Net.WebClient).DownloadString('https://chocolatey.org/install.ps1'))Chocolateyでnodeのバージョン管理ツールnvmをインストール
choco install nvm -ynvmで任意のnode.jsをインストール
nvm install **.**詳しくはこちらの記事。
https://weblion303.net/1918/
yarnのインストール
choco install yarn -y環境変数が追加されるのでターミナルを再起動
jdkのインストール
choco install adoptopenjdk --version 8.192 -y環境変数に上記jdkのパスを追加
JAVA_HOME:C:\Program Files\AdoptOpenJDK\～
Pythonをインストール
choco install python2 -yAndroid Studioをインストール
choco install androidstudio -yAndroidStudioを起動し、SDKマネージャーから任意のファイルをダウンロード
環境変数にパスを通す
ANDROID_HOME：C:\Users\ユーザー名\AppData\Local\Android\Sdk
React Native CLIをインストール
yarn global add react-native-cliアプリケーションの作成＆起動
アプリを新規作成
react-native init appnameアプリを起動
AndroidStudioを起動し、AVD Managerからエミュレーターを起動。
アプリケーションを起動
react-native run-android最後に
うまくいかなかった部分と解決策をメモしておきます。
The SDK directory ~ does not exist
文字通りSDKディレクトリの指定先が間違えているか、パスが通っていないため見つからないというエラー。
パスを確認。また、既存のプロジェクトをbuildしようとしている場合で既にandroidディレクトリが存在していた場合は、同ディレクトリを削除し、以下コマンドでファイル群を再生成する
react-native ejectUnable to load script.Make sure you are either running a Metro server
サーバーがうまく起動しておらず、自分の場合はnode.jsのバージョンが高すぎたのが原因でした。
node.jsのバージョンを下げて再チャレンジするとbuildが成功するようになりました。
Error: spawn ./gradlew EACCES
別マシンから移動してきた場合などで権限エラーが発生
chmod 755 android/gradlew 
