React NativeでHello, World

React Nativeとは

facebook.github.io

• React Native ファーストインプレッション - Qiita
  • “コードは特に別のトランスパイラなどを必要とせず ES6 前提で書くことができる”
  • “JavaScript のコードがコンパイルされてネイティブコードになるわけではなく、内部に JavaScript ランタイム (JavaScriptCore) があって”
  • “内部には Objective-C で書かれた、JS <=> ネイティブブリッジの実装があり”
• React Nativeがスマホアプリのフロント開発を変えるのか - ワザノバ | wazanova
  • “Reat Nativeが示したのは、一般的に支持されている「バーチャルDOM」よりも、「ゼロDOM」をReactJSが志向しているということ”
  • “高いパフォーマンス粒度の構築ブロック（マルチスレッドでデコードされたや、DOMをまったく使わないブロックなど）”
• React Nativeを用いた初めてのiOSアプリ開発 : 選んだ理由と、開発で学んだこと | プログラミング | POSTD
  • “一度覚えると、どこでも書ける”
  • “react-native-simple-store”
  • “react-native-router-flux”
• React Native: 迅速な iOS 開発の新しい世界へ
  • 以下略

やってみよう

Getting Started

• Tutorial
• Getting Started
  • ← 完全にこれ

環境

% nvm ls
        v0.12.2
->       v5.3.0
node -> stable (-> v5.3.0) (default)
stable -> 5.3 (-> v5.3.0) (default)

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

% npm install -g react-native-cli

react-nativeプロジェクトを新規作成

% cd ~/projects
% react-native init HelloWorld

まずRun

% cd ~/projects/HelloWorld
% open ./ios/HelloWorld.xcodeproj
# Xcodeでxcode project開く要領で

もう動く

ちょっといじる

diff --git a/index.ios.js b/index.ios.js
index db18a5b..451cb99 100644
--- a/index.ios.js
+++ b/index.ios.js
@@ -8,6 +8,7 @@ import React, {
   Component,
   StyleSheet,
   Text,
+  Image,
   View
 } from 'react-native';

@@ -15,9 +16,9 @@ class HelloWorld extends Component {
   render() {
     return (
       <View style={styles.container}>
-        <Text style={styles.welcome}>
-          Welcome to React Native!
-        </Text>
+        <Image source={{uri: 'https://pbs.twimg.com/media/CfjoQcLWIAE4huU.jpg'}} style={{width: 240, height: 240}} />
+        <Text>リアクトネーティブ？？？？！！</Text>
+        <Text style={{fontSize: 48}}>つよそうだな！！</Text>
         <Text style={styles.instructions}>
           To get started, edit index.ios.js
         </Text>

で、Reactのイベントハンドラが使えるんでしょ？最高か。

エラーメモ: Can’t find variable Image

律っちゃんの画像を表示したいなと思ってImageタグを使ったんだけど、掲題のエラーが出る

（めちゃくちゃけったいなエラー画面が出るし、これSimulatorなので、エラーメッセージのコピペができない）

原因

ReactNativeは、完全にES6シンタックスで、Componentベースで開発できる。gulpとかwebpackとかいらない。で、ES6シンタックスなので、importしていない変数は基本使えない。react-nativeパッケージの標準コンポーネントも、例外ではない。

解決

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

ついでにAndroidもチェック

セットアップがわりとだるい

• https://facebook.github.io/react-native/docs/android-setup.html

tl;dr

1. brew install android-sdk and set $ANDROID_HOME
2. install SDKs via android
3. create simulator via android avd
4. react-native run-android

途中、

failed to find Build Tools revision 23.0.1

とか言われるので、ああハイハイ、ビルドツールが無いのね、って思うので、2番で該当するものインストールする。 参考: android - failed to find Build Tools revision 21.1.1 - sdk up to date - Stack Overflow

Could not find com.android.support:appcompat-v7:23.0.1

参考: Android appcompat v7:23 - Stack Overflow ExtrasのLocal Maven repository for Support Libraries入れたら治ったよ、というひとがいるけどLocal Maven repository for Support Librariesなんて見当たらないので、Extras全部入れた。めんどいし。

com.android.builder.testing.api.DeviceException: No connected devices!

デバイスつくってなかった（3番飛ばしてた）ということなので、つくった。 参考: Failed run android simulator : No connected devices! · Issue #3091 · facebook/react-native · GitHub

Please ensure Intel HAXM is properly installed and usable.

デバイスつくってエミュレータをStartしようとしたら叱られた。 参考: android - Intel X86 emulator accelerator (HAXM installer) VT/NX not enabled - Stack Overflow

解決

open /usr/local/Cellar/android-sdk/24.4.1_1/extras/intel/Hardware_Accelerated_Execution_Manager/IntelHAXM_6.0.1.dmg

んで、もっかいandroid avdして、Start...しておく

react-native run-androidする側のターミナルで、以下のようにリストされればよい

% adb devices
List of devices attached
emulator-5554   device

%

で、やっとreact-native run-androidすると、

Androidでも動いた！

が、律っちゃんがいない。それは当然、index.android.jsをいじってないからで、なるほど、「一度書けば全てで動く」ではなく「一度覚えれば全てで書ける」なんだな、つまり書け、と。

雑感

• だいたい動いたし、ES6/Reactでアプリ書けるのは気持ちいいっぽい
• iOS/Androidの差分とか考えるの最初はめんどうなので、まずはどっちかだけのプロジェクトで適用するのがいいかもなと思った
• 権限のリクエストとか、ストレージとか、ネイティブAPIとか、どんな感じなのか気になりますね
• とりあえず良い感じっぽい

DRYな備忘録

Learning React Native: Building Native Mobile Apps with JavaScript

入門 React ―コンポーネントベースのWebフロントエンド開発