React Native とは？
React Native とは何でしょうか。
React Native は、iOSおよびAndroid アプリケーションを作成するための、JavaScript Framework です。
ネイティブアプリを開発するための言語を学ぶことにコストを割くことなく、JavaScript を利用してネイティブアプリを作成することができます。
また、React Native はmarkup をネイティブのUI要素に変換するので、高いパフォーマンスが期待できます。
開発環境を整える
注意：iOS、およびAndroid app をビルドすることになるので、開発端末はmacOSを搭載したものを用意しましょう。
環境は、Expo CLI と、React Native CLI の2通りがありますが、Expo はかゆいところに手が届かないシーンがあるので、React Native CLI でセットしていきます。もちろん、開発端末はmacOSを搭載したもの。
iOS 向け環境構築、およびAndroid 向け環境構築のどちらも実施してください。
iOS 向け環境構築
事前準備
Homebrew をまずインストールします。
https://brew.sh/
Node.js
Nodejs をインストールします。
brew install node
watchman
watchman をインストールします。
brew install watchman
Xcode
Xcode をインストールします。Xcodehttps://apps.apple.com
Xcode CLI をインストールします。
Xcode > XCode > Preferences… > Locations > Command Line Tools > プルダウン
iOS Simulator をインストールします。
Xcode > Xcode > Preferences… > Components > 対応バージョンをインストール
CocoaPods
CocoaPods をインストールします。
sudo gem install cocoapods
Android 向け環境構築
JDK
JDK をインストールします。
brew cask install adoptopenjdk/openjdk/adoptopenjdk8
Android Studio
Android Studio をインストールします。Download Android Studio and SDK tools | Android Developershttps://developer.android.com
インストール時、カスタムセットアップを選択し、以下のボックスがオンであることを確認します。その後、次へをクリックし、これらのコンポーネントを全てインストールします。
- Android SDK
- Android SDK Platform
- Performance (Intel ® HAXM)
- Android Virtual Device
Android SDK
Android SDK をインストールします。
Android Studio > Tools > SDK Manager
SDK Platforms
Show Package Details
Android 9 (Pie)
Android SDK Platform 28
Intel x86 Atom_64 System Image
さらに、
SDK Tools
Show Package Details
Android SDK Build-Tools
28.0.3 にチェック
Apply
環境変数を設定
環境変数を設定します。
$HOME/.bash_profile または、$HOME/.bashrcに追記します。
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 $HOME/.bash_profile してロードし直します。
echo $PATH で、ANDROID_HOME が追加されていることを確認します。
新しいアプリケーションを作成する
MyNewProject はプロジェクト名なので、任意の名前に変更することができます。
npx react-native init MyNewProject
React Native アプリケーションを実行する (iOS)
npx react-native start は、Metro Bundler を起動するコマンドです。
cd MyNewProject
npx react-native start
Metro Bundler を起動したまま、もう一つターミナルを起動し、以下のコマンドを実行します。
npx react-native run-ios
npx react-native run-ios は、アプリを実行する1つの方法です。Xcode 内から直接実行することもできます。
また、シミュレータではなく、実機でアプリケーションを実行することもできます。
React Native アプリケーションを実行する (Android)
Android仮想デバイスを用意します。
Android Studio > Tools > AVD Manager > Create Virtual Device… > 任意のデバイスを作成
Metro Bundler を起動していない場合は、Metro Bundler を起動します。
Metro Bundler を起動している場合は、以下のコマンドを実行する必要はありません。
cd MyNewProject
npx react-native start
Metro Bundler を起動したまま、もう一つターミナルを起動し、以下のコマンドを実行します。
npx react-native run-android
npx react-native run-android は、アプリを実行する1つの方法です。Android Studio 内から直接実行することもできます。
また、Android仮想デバイスではなく、実機でアプリケーションを実行することもできます。
まとめ
以上で、基本的なReact Native の起動の仕方がわかりました。
これらの操作をベースに、コードに編集を加えていくことになります。