macにReact Nativeを導入してHello Worldを出力させる

イントロダクション

アプリ開発に興味があったので、比較的簡単に始められそうなReact Nativeに挑戦してみました。 React Nativeはモバイル向けのアプリをクロスプラットフォーム開発することができます。 (通常、Androidアプリを作るためにはKotlin、iOS用のアプリはSwiftが必要。) この記事ではアプリ開発初心者がmacにReact Nativeを導入して、実機に"Hello World"を出力させるまでを報告します。

目次

環境

• MacBook Air (2015 early)
• macOS Mojave
• Android端末 : Huawei P10 Lite

導入編

以下のサイトを参考にしてReact Nativeを導入しました。

• Getting Started - React Native 0.59 公式
• react-native androidの開発環境構築方法 Mac版 - Qiita

brewの導入とアップデート

すでにhomebrewが入っている場合は以下のコマンドでアップデート。

brew upgrade

brewでnodeとwatchmanをインストール

watchmanはFacebookが作っているファイル変更監視システム。

brew install node
brew install watchman

バージョン8.3以上のNodeが必要なので、アップデートするときはnをインストールしてパッケージ管理。

npm install -g n
sudo n latest

npmのアップデート。

npm update -g npm

React Native CLIの導入

実際にReact Nativeをインストールします。

npm install -g react-native-cli

これでAndroidとiOS用のアプリ開発の共通設定は終了。

AndroidとiOSの個別設定

iOSの個別設定

Xcodeを開き、Preferences→location→Command Line Toolsで最新のXcodeのバージョンを選択。

Androidの個別設定

Java Development Kitのインストール

OracleのHPからインストール。React Native 0.59ではJDK 8が必要。

Android Studioをインストール。

カスタムセットアップでAndroid SDK, Android SDK Platform, Performance (Intel ® HAXM), Android Virtual Deviceにチェックが入っているか確認して次に進みます。

SDKの設定

1. セットアップ終了後、configure→SDK Managerを開き、SDK PlatformsタブにShow Package Detailsがあるのでチェックを入れます。
2. Android SDK Platform 28と(Intel x86 Atom_64 System ImageまたはGoogle APIs Intel x86 Atom System Image)にチェックを入れます。
3. 同様に、SDK ToolタブのShow Package Detailsにチェックを付け、Android SDK Build-Toolsの28.0.3にチェックを入れます。

環境変数の変更

環境変数を追加します。

vi ~/.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 ~/.bash_profile

アプリ開発編

初期化

導入がうまく行ったら新規で初期化して開発を始めます。

react-native init [Project name]

最新のものではなく少し前の安定したバージョンを指定をしたいとき。

react-native init AwesomeProject --version 0.59.3

実行

実際にエミュレータや実機で実行します。

cd [Project name]

# android
react-native run-android

# iOS
react-native run-ios

エミュレータ(または実機)に、Welcome to React Native!が表示されていたらOK。

コードの編集

プログラムを書き換えるときは、[Project name]内のApp.jsをいじります。 公式チュートリアルの通りに書き換えたら、(実機なら端末を振って)Reload。

import React, { Component } from 'react';
import { Text, View } from 'react-native';

export default class HelloWorldApp extends Component {
  render() {
    return (
      <View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
        <Text>Hello, world!</Text>
      </View>
    );
  }
}

Reloadして、Hello Worldが出力されていたらOK。

トラブルシューティング

そもそもreact-nativeが実行できなかったら

npmのグローバルパッケージのパスが通ってない可能性があります。まず、npmが起動できるか確認。

npm root -g

npmのパスが通ってたら、vimでパスを通して更新。

vim ~/.bash_profile
source ~/.bash_profile

なお、bash_profileに書き込む内容は以下。

export PATH=$PATH:`npm bin -g`

• グローバルにインストールしたnode moduleがnot foundになる時の対処 - Qiita

react-native run-androidが実行できないとき

吐き出されたエラー

$ react-native run-android

info Starting JS server...
info Building and installing the app on the device (cd android && ./gradlew app:installDebug)...
> Task :app:installDebug FAILED

FAILURE: Build failed with an exception.

* What went wrong:
Execution failed for task ':app:installDebug'.
> com.android.builder.testing.api.DeviceException: No connected devices!

* Try:
Run with --stacktrace option to get the stack trace. Run with --info or --debug option to get more log output. Run with --scan to get full insights.

* Get more help at https://help.gradle.org

BUILD FAILED in 1m 23s
26 actionable tasks: 26 executed
error Could not install the app on the device, read the error above for details.
Make sure you have an Android emulator running or a device connected and have
set up your Android development environment:
https://facebook.github.io/react-native/docs/getting-started.html
error Command failed: ./gradlew app:installDebug. Run CLI with --verbose flag for more details.

解決策1 : Andorid studioでエミュレータを起動した状態でrun

そもそもmacのスペック的にエミュレータを起動できなかったことが判明。

• React Nativeでrun-androidしたときにNo connected devices!になる - Qiita

解決策2 : 実機で動かす

1. Andorid端末とmacをUSBケーブルでつなぐ(必ずデータ通信できるケーブルを使う、これ重要)。
2. 開発者モードにするため、設定→端末情報のビルド番号を7回タップし、PWを入力。
3. 戻ると開発者向けオプションが出現するので、USBデバックを有効にする。
4. 開発者向けオプションでスリープモードにしない、
5. adb devicesで端末が表示されていればOK。

参考サイト

• Running On Device - React Native 0.59 公式
• AndroidスマホとMacが接続できない時の解決策 - FonePaw

今後

• クソアプリをいくつか作って慣れる
• 個人的には欲しいけど需要がないアプリがあるのでそれらを開発
• React.jsあたりの勉強もする
• Macbookを買い換える＆iOSを買う(一番重要かもしれない)

参考サイト

• Getting Started - React Native 0.59 公式
• react-native androidの開発環境構築方法 Mac版 - Qiita
• watchman
• Java SE Downloads - Oracle
• Tutorial - React Native 0.59 公式
• グローバルにインストールしたnode moduleがnot foundになる時の対処 - Qiita
• React Nativeでrun-androidしたときにNo connected devices!になる - Qiita
• Running On Device - React Native 0.59 公式
• AndroidスマホとMacが接続できない時の解決策 - FonePaw