プログラム関係の備忘録。技術系記事1000記事以上を目指すブログ

react-nativeの環境構築~Windows編~

はじめに

react-nativeでの環境構築ですが、いろいろと準備することが多くてハマった際の問題切り分けが少し大変だった印象です。

まず、react-nativeでのアプリ作成にはExpoとreact-native-cliの2つがあるので、ググるときに気を付ける。前者の環境構築はかなり簡単です。

今回は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 -y

nvmで任意の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 -y

Android Studioをインストール

choco install androidstudio -y

AndroidStudioを起動し、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 eject

Unable to load script.Make sure you are either running a Metro server

サーバーがうまく起動しておらず、自分の場合はnode.jsのバージョンが高すぎたのが原因でした。

node.jsのバージョンを下げて再チャレンジするとbuildが成功するようになりました。