初心者がReactNativeを使ってAndroidで起動できるようにするまでの記録

概要

諸事情でReactNative触る機会があるんだけど、 Nativeは経験が薄く、Reactもそんなにガッツリ触ってないのでこれを期に勉強しようと思ったのでまとめ。

実行環境

• Mac mini (Late 2014)
• OS X EL Capitan
• 2.8 GHz Intel Core i5
• 8GB

悲しいかな、High Sierraにできなかったんだこの端末...

入門準備

めんどくさいので今回はAndroidのみ。

• Android Studio
• https://facebook.github.io/react-native/docs/getting-started.html

Android

SDKMan

JDKや管理用にSDKMANを入れる。

Home - SDKMAN! the Software Development Kit Manager

$ curl -s "https://get.sdkman.io" | bash
$ source "$HOME/.sdkman/bin/sdkman-init.sh"

※このとき、tr, ttにshellでalias貼ってるとエラーになるので注意。

~/.bashrcを開くとSDKMANの初期化コードが含まれている。（えーーーー） zsh使いなのでzprofileに移す...

$ echo '
#THIS MUST BE AT THE END OF THE FILE FOR SDKMAN TO WORK!!!
export SDKMAN_DIR="/Users/mizuki/.sdkman"
[[ -s "/Users/mizuki/.sdkman/bin/sdkman-init.sh" ]] && source "/Users/mizuki/.sdkman/bin/sdkman-init.sh"
' >> ~/.zprofile

いや、よしんばbashはいいとしても、rcに書き込まないでくださいよ、こちとらgitで管理してんやぞ？ profileあるやろ。なんで？

.zprofileはお使いのshellに置き換えてご利用ください。

$ sdk version

SDKMAN 5.5.13+272

JDKのインストール

$ sdk list java

一覧が出てくる。 今回は諸事情によって1.8が使いたい。

$ sdk install java 8.0.171-oracle

$ java -version
java version "1.8.0_171"
Java(TM) SE Runtime Environment (build 1.8.0_171-b11)
Java HotSpot(TM) 64-Bit Server VM (build 25.171-b11, mixed mode)

ok

Android Studio

Download Android Studio and SDK tools  |  Android DevelopersからAndroidStudioをダウンロードしてくる。 （この時点での最新は3.1.3 for Mac）

インストール類は時間かかるから先にやるのがおすすめ

ReactNativeのガイダンスに従ってインストールを進める。

1. ウィザードが起動するので、Choose the type of setup you want for Andriod Studio のメッセージが出てきたらCustomを選択。
2. Select UI Theme は好きなやつ
3. SDK Components Setupは以下のものを選ぶ 3.1. Android SDK (チェック済み) 3.2. Android SDK Platform (チェック済み) 3.3. Performance (Intel ® HAXM) (チェック済み) 3.4. Android Virtual Device (チェックする)
4. このさきは任意で

Android Virtual Device はエミュレーターのやつ。

ウィザードが完了したら Welcom to Android Studio 画面に来るので、Configure から SDK Manager を起動。

なんかいい感じに選んでいれてく。

最後にANDROID_HOMEにパスを通す。

$ echo '
export ANDROID_HOME=$HOME/Library/Android/sdk
export PATH=$PATH:$ANDROID_HOME/tools
export PATH=$PATH:$ANDROID_HOME/tools/bin
export PATH=$PATH:$ANDROID_HOME/platform-tools
' >> ~/.zprofile

あとでadbとか使うからね。

ReactNative Projectのセットアップ

$ npm install -g create-react-native-app
$ create-react-native-app rnapp-weather

Node実行環境

$ ndenv install v10.5.0
$ ndnev local
$ ndenv rehash

# create-react-native-appで入ったやつを消
$ rm -rf node_modulesす
$ rm yarn.lock

# re:install
$ npm install

added 1302 packages from 787 contributors and audited 35887 packages in 55.633s
found 5 vulnerabilities (2 low, 2 moderate, 1 high)
  run `npm audit fix` to fix them, or `npm audit` for details

npm 6で追加されたauditのレポート。 npm audit fixを使うと、解決策が提示されている場合は解決してくれる。

+ react-native-scripts@1.14.1
added 6 packages from 17 contributors, removed 82 packages and updated 4 packages in 12.801s
fixed 2 of 5 vulnerabilities in 35887 scanned packages
  2 vulnerabilities required manual review and could not be updated
  1 package update for 1 vuln involved breaking changes
  (use `npm audit fix --force` to install breaking changes; or do it by hand)

一旦これでよしとしよう。

実行

$ npm start

10:20:11: Unable to start server
See https://git.io/v5vcn for more information, either install watchman or run the following snippet:
  sudo sysctl -w kern.maxfiles=5242880
  sudo sysctl -w kern.maxfilesperproc=524288

Start script hangs without error when there are no available inotify watches · Issue #234 · react-community/create-react-native-app · GitHub

なるほど

$ sudo sysctl -w kern.maxfiles=5242880
$ sudo sysctl -w kern.maxfilesperproc=524288

リトライ

$ npm start
10:22:03: Starting packager...

okそう。

ejectの実行

このままだとReactNativeしかないのでNative使えるようにする

$ npm run eject

> rnapp-weather@0.1.0 eject /Users/mizuki/project/rnapp-weather
> react-native-scripts eject


We didn't find any uses of the Expo SDK in your project, so you should be fine to eject to
"Plain" React Native. (This check isn't very sophisticated, though.)

We strongly recommend that you read this document before you proceed:
  https://github.com/react-community/create-react-native-app/blob/master/EJECTING.md

Ejecting is permanent! Please be careful with your selection.

? How would you like to eject from create-react-native-app? React Native: I'd li
ke a regular React Native project.
We have a couple of questions to ask you about how you'd like to name your app:
? What should your app appear as on a user's home screen? Weather
? What should your Android Studio and Xcode projects be called? Weather

How would you like to eject from create-react-native-app?

そのままEnter

What should your app appear as on a user’s home screen?

Weather

What should your Android Studio and Xcode projects be called?

Weather

Android端末の接続

手元にないのでエミュレーターで。 ーーって思ったけどどこからDevice Manager起動するのかわからねえ...

仕方ないので新しくProject立ち上げる。 CLIとかどっからDevice Manager起動できひんの？

Virtual Devices起動できた、が、アイコン小さすぎてわからない。これは... 初心者辛くない...？

$ adb devices
List of devices attached
emulator-5554   device

接続を確認。

AndroidでReactNativeを実行

$ npm start

こっちでビルドして配信する。

別ターミナルを開いて、ビルドを実行。

$ npm run android

めったビルド走る。

わぁい赤ぁい

error: bundling failed: Error: Couldn't find preset "babel-preset-react-native-stage-0/decorator-support" relative to directory "/Users/mizuki/project/rnapp-weather"

diff --git a/.babelrc b/.babelrc
index 0f0c07d..57415c7 100644
--- a/.babelrc
+++ b/.babelrc
@@ -1,6 +1,6 @@
 {
   "presets": [
-    "babel-preset-react-native-stage-0/decorator-support"
+    "babel-preset-react-native"
   ],
   "env": {
     "development": {

うごいた

Hello World

しようとおもったけど疲れたので次にする。 hotreloadうごかん。

まとめ

導入で力尽きた

• create-react-native-appしたらejectする
• モジュール間のバージョン際なんてよくあること
• emulatorはなにが起きてもおかしくないので強く心を保つ
• hotreloadをする

3hくらいかかった。つかれた

github.com