React Native

React Native の始め方

React Native
この記事は約6分で読めます。

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 の起動の仕方がわかりました。
これらの操作をベースに、コードに編集を加えていくことになります。