snovaのブログ

プログラミングとか、日常のこととか、アウトプットしたほうがよいと聞いたので

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



【スポンサーリンク】



イントロダクション

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

目次

環境

導入編

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

brewの導入とアップデート

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

brew upgrade

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

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

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

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

AndroidiOSの個別設定

iOSの個別設定

Xcodeを開き、PreferenceslocationCommand 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. セットアップ終了後、configureSDK 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-Tools28.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`

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のスペック的にエミュレータを起動できなかったことが判明。

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

参考サイト

今後

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

参考サイト