Honmushi blog
React Nativeのセットアップ2020/02/11

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 28Intel x86 Atom_64 System Image または Google APIs Intel x86 Atom System Imageにチェックをつけます。
    2. SDK ToolsタブにてAndroid SDK Build-Tools28.0.3にチェック。

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

  • 環境変数にANDROIDHOMEを設定
    $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を使っている場合はそのまま端末でのデバッグ等可能ですが、そうでない場合は物理端末との接続・連携が必要になります。

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

  • このエントリーをはてなブックマークに追加