React Nativeのセットアップ

React Nativeでスマホアプリをつくる際の環境立ち上げのメモです。 人に教える機会があったのでついでにまとめておきます。Ubuntuの場合です。

基本はとても簡単です。端末の接続や稼働環境の準備など必要ですが、そのあたりも追々まとめます。 Expoを使うとさらに簡単です。

概要

• ドキュメント
• Expoを使う場合
• React native cliを使う場合

ドキュメント

https://facebook.github.io/react-native/docs/getting-started.html#android-development-environment

上記ドキュメントに従って進めれば問題ありません。

Expoを使う場合

Expoを使う場合はとても簡単です。いくつかできなくなることも有りますが、とりあえず動かしてみるのには十分なのでとても便利です。最初はコチラを利用するのがおすすめです。

npm install -g expo-cli

上記を行うだけでExpoを使ってのデフォルトアプリの用意などできるようになります。

あとは、実際に端末で動かすために各OSストアにてExpoのクライアントアプリをインストールすればオッケーです。

React native cliを使う場合

Expoを使わない場合です。ちょっと手順が複雑になりますがネイティブ部分の実装などが必要な場合、コチラの手順が必要になります。

以下3つが必要ですのでインストールします。

Node

nvmなどを使ってインストールしましょう。

JAVA開発キット

https://adoptopenjdk.net/installation.html#linux-pkg
このページの内容に従って進めます、aptでインストールします。

Android開発環境

• Android studioをインストールします。別記事でまとめました。参考にどうぞ。
  Android studioのインストール手順

• Android SDKのインストール
  Android studioのSDKマネージャーにてインストールを行います。 「Configure」から「SDKManager」を開き、以下2箇所の設定をおこないインストールします。
  右下の「Show Package Details」にチェックをつけておきましょう、詳細な情報が表示されます。

  1. SDK Platformsタブにて以下の項目にチェックをつけます。

     • Android 9 (Pie)のAndroid SDK Platform 28
     • Intel x86 Atom_64 System Image または Google APIs Intel x86 Atom System Image

  2. SDK ToolsタブにてAndroid SDK Build-Toolsの28.0.3にチェック。

     OKをクリックして規約等のチェックを行い、インストールします。

• 環境変数にANDROID_HOMEを設定
  $HOME/.bashrcか$HOME/.bash_profileに以下を追加します。

  export ANDROID_HOME=$HOME/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-too

  設定変更後、bashに反映します。再度起動するかsource $HOME/.bashrcを実行。
  その後、echo $PATHで環境変数にANDROID_HOMEが追加されていることを確認しておきましょう。

必要ならWatchmanをインストール

パフォーマンス的にあったほうがいいそうです。推奨されています。
https://facebook.github.io/watchman/docs/install.html#buildinstall

おわりに

基本的には上記でreact-native initコマンド、またはexpo initにてデフォルトのアプリを始めることが出来ます。 Expoを使っている場合はそのまま端末でのデバッグ等可能ですが、そうでない場合は物理端末との接続・連携が必要になります。

端末の接続・連携についてはまた別記事で紹介します。