2018年10月12日金曜日

macOS で react-native 入門

概要
環境
事前準備
react-native-cli のインストール
Xcode コマンドラインツールのインストール
新規アプリケーションの作成
ios/AwesomeProject.xcodeproj を Xcode で開き設定変更
とりあえず動かしてみる
- error: bundling failed: Error: Unable to resolve module ./../react-transform-hmr/lib/index.js
ちょろっとコードを改修する
最後に
参考サイト

概要

macOS で react-native を使って iOS アプリを開発してみました
なお今回は expo を使わずに react-native-cli を直接使います

環境

macOS 10.14
Xcode 10.0 (10A255)
node 10.1.0
watchman 4.9.0
react-native-cli 2.0.1
react-native 0.57.2 -> 0.57.1

事前準備

まずは環境を構築します

brew install node
brew install watchman

node は 8.3 以上が必要です

react-native-cli のインストール

react-native-cli プロジェクトを作成したり

npm install -g react-native-cli

Xcode コマンドラインツールのインストール

Xcode を開き Preferences -> Locations からインストールできます

新規アプリケーションの作成

とりあえずサンプル用のアプリケーションを作成します

react-native init AwesomeProject

いろいろとダウンロードが始まります
プロジェクトの作成が完了し各プラットフォームでのビルド方法が表示されれば OK です

To run your app on iOS:
   cd /Users/hawksnowlog/work/AwesomeProject
   react-native run-ios
   - or -
   Open ios/AwesomeProject.xcodeproj in Xcode
   Hit the Run button
To run your app on Android:
   cd /Users/hawksnowlog/work/AwesomeProject
   Have an Android emulator running (quickest way to get started), or a device connected
   react-native run-android
(node:67987) ExperimentalWarning: The fs.promises API is experimental

ios/AwesomeProject.xcodeproj を Xcode で開き設定変更

このままビルドしても Print: Entry, ":CFBundleIdentifier", Does Not Exist のエラーでビルドできません
一度プロジェクトの設定を変更します

File -> Project Settings
Advanced

で Build Location を以下のように変更します

Products と Intermediates の先頭に build/ を入力しました
またプルダウンは「Relative to Workspace」を選択します

とりあえず動かしてみる

cd AwesomeProject
react-native run-ios

でシミュレータが起動しテストできます
8081 で LISTEN するビルドサーバが立ち上がるのですでにポートを使っている場合はプロセスを停止しましょう
ビルドしてパッケージを転送するのでアプリが起動する前に結構時間がかかります
またやたら warning が出ている感じがしますが気にせず進めます
環境によるかもしれませんがシミュレータは iPhone6 が立ち上がりました

ターミナルでは以下のようになっていれば成功です
これが 100% にならない場合はどこかでビルドが失敗しています

`error: bundling failed: Error: Unable to resolve module ./../react-transform-hmr/lib/index.js`

どうやら react-native 0.57.2 で出るようです (参考)
0.57.1 にダウングレードしてビルドし直しましょう

vim package.json

"react-native": "0.57.1"

npm add @babel/runtime
npm install
rm -rf $TMPDIR/react-*; rm -rf $TMPDIR/haste-*; rm -rf $TMPDIR/metro-*; watchman watch-del-all

をしてから再度 react-native run-ios してみてください

ちょろっとコードを改修する

App.js を編集しましょう
とりあえずウェルカムメッセージの部分を変更しました

<Text style={styles.welcome}>Welcome to React Native!!!</Text>

保存して Command + r をシミュレータ上で実行するとアプリの変更が反映されていると思います

最後に

react-native を使って iOS アプリをビルドしてみました
Android 用のビルド環境を作れば Android でもビルドできると思います

今回は最新バージョン (0.57.2) でバグのような挙動があったので苦労しましたが本来であればエラーは出ずにビルドできると思います
一度ビルドしてアプリを起動すれば変更などはすぐに確認できるのは良いかなと思います

ただ最近は Airbnb が react-native での開発をやめたりとあまり良いニュースがないイメージです
もともと Swift なり Kotlin で native 開発できるのであれば多少手間でも将来性を考えると native を使ったほうが良いかなと思います

hawksnowlog