React Native 環境構築 初期セットアップ手順


Published on April 06, 2020

React Nativeの開発環境構築手順です。

公式Docの通り。

ちなみにMac環境です。


NodeとWatchManのインストール


Homebrewを使ってインストールします。 まだHomebrewをインストールしていない人は

terminal
$ /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install.sh)"

terminal
$ brew install node
$ brew install watchman


iOS設定


Xcode & CocoaPodsのインストール

Xcodeのインストールはこちら MacAppStore

iOSシミュレーターの追加

add-ios-simulator

使用したいiOSのバージョンを選択してインストールします。

CocoaPodsのインストール

MacOSにもともと入っているSystemのrubyを使用する場合は

terminal
$ sudo gem install cocoapods

rbenvなどのrubyバージョン管理ソフトを入れている場合は、

terminal
$ gem install cocoapods


Android設定


JDK (Java Development Kit) のインストール

terminal
brew cask install adoptopenjdk/openjdk/adoptopenjdk8

Android Studioのインストール

Android Studioをインストールします。

初期のセットアップ画面でInstall TypeはCustomを選択し、

SDKComponents Setup画面において全てにチェックボックスを入れる。

android-studio-initial-sdk-setup

Android SDKのインストール

Android Studio起動後に、SDK設定画面を開きます。

open-sdk-manager

SDK Platformsタブを開いて、右下のShow Package Detailsにチェックを入れて詳細を表示し、

  • Android SDK Platform 28
  • Intel x86 Atom_64 System Image or Google APIs Intel x86 Atom System Image

にチェックを入れる。

install-android-sdk

さらに、SDK-Toolsタブを開いて、また右下のShow Package Detailsにチェックを入れて詳細を表示

Android SDK Build-Tools28.0.3にチェックを入れる。

install-android-sdk-tools

Applyをクリックしてインストールします。

.bash_profileの編集

.bash_profileファイルに、下記を追記します。

.bash_profile
export ANDROID_HOME=$HOME/Library/Android/sdk
export PATH=$PATH:$ANDROID_HOME/emulator
export PATH=$PATH:$ANDROID_HOME/tools
export PATH=$PATH:$ANDROID_HOME/tools/bin
export PATH=$PATH:$ANDROID_HOME/platform-tools

sourceコマンドで変更を反映
terminal
$ source .bash_profile


新規applicationの作成


terminal
$ npx react-native init AwesomeProject

テンプレートをベースにする場合は--template <template name>を付ける。

例えば、TypeScriptテンプレートを使用する場合はこちら

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

アプリケーションの起動

iOS

terminal
$ npx react-native run-ios

Android

terminal
$ npx react-native run-android

Android起動時に

Could not initialize class org.codehaus.groovy.runtime.InvokerHelper

というエラーになる場合は、

android/gradle/wrapper/gradle-wrapper.properties内のdistributionUrlを

gradle-6.0.1-all.zipからgradle-6.3-all.zipに変更すると起動する。

参考:JDK 14 support #10248

If you like it, share it!