読者です 読者をやめる 読者になる 読者になる

DRYな備忘録

Don't Repeat Yourself.

React NativeでHello, World

React Nativeとは

facebook.github.io

やってみよう

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>

f:id:otiai10:20160409082500p:plain

で、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もチェック

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

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 ExtrasLocal 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

f:id:otiai10:20160409091756p:plain

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

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

% adb devices
List of devices attached
emulator-5554   device

%

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

f:id:otiai10:20160409092451p:plain

Androidでも動いた!

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

雑感

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

DRYな備忘録

Learning React Native: Building Native Mobile Apps with JavaScript

Learning React Native: Building Native Mobile Apps with JavaScript

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

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