React NativeでAndroidアプリケーションを作ってみる
「ElectronでGUIアプリケーションを作ってみる」では、Electronを使ってJavaScriptで簡単なGUIアプリを作った。 ここではReact Nativeを使い、JavaScriptで同様のAndroidアプリを作ってみる。 なお、ここではWindowsを使って開発を行う。
環境
Windows 8.1 Pro 64 bit版
>systeminfo OS 名: Microsoft Windows 8.1 Pro OS バージョン: 6.3.9600 N/A ビルド 9600 OS ビルドの種類: Multiprocessor Free システムの種類: x64-based PC プロセッサ: 1 プロセッサインストール済みです。 [01]: Intel64 Family 6 Model 69 Stepping 1 GenuineIntel ~1596 Mhz
Node.jsのインストール
まず、Node.jsの公式サイトからインストーラをダウンロードし、Node.jsをインストールする。 インストール後、コマンドプロンプトから次のコマンドが使えることを確認する。
>node --version v4.4.3 >npm --version 2.15.1
JDK 8のインストール
次に、JDKのダウンロードページからWindows x64用のインストーラをダウンロードし、JDK 8をインストールする。
インストール後、PATH
環境変数にC:\Program Files\Java\jdk1.8.0_77\bin
を追加しておく。
コマンドプロンプトを起動し、次のコマンドが使えることを確認する。
>javac -version javac 1.8.0_77
Android SDKのインストール
続けて、Android Studioのページのページからインストーラをダウンロードし、Android StudioとSDKをインストールする。 インストール後、以下の環境変数を追加する。
ANDROID_HOME
環境変数にC:\Users\user\AppData\Local\Android\Sdk
を追加PATH
環境変数にC:\Users\user\AppData\Local\Android\sdk\tools
、C:\Users\user\AppData\Local\Android\sdk\platform-tools
を追加
次に、C:\Users\user\AppData\Local\Android\Sdk\SDK Manager.exe
を起動し、以下のコンポーネントをインストールする。
C:\Users\user\AppData\Local\Android\Sdk\AVD Manager.exe
を起動し、次のスクリーンショットのようにAndroid仮想デバイスを作成する。
Android仮想デバイスを作成したら、起動(Start)してそのままの状態にしておく。
React Nativeを動かしてみる
まず、npmからreact-native-cliパッケージをインストールする。
>npm install -g react-native-cli
react-nativeコマンドが使えるようになるので、これを使いプロジェクトを新規作成する。 非常に多くのファイルが作成されるため、SSDまたはRAMディスク上で行うとよい。
>react-native init HelloReactNative This will walk you through creating a new React Native project in Z:\HelloReactN ative Installing react-native package from npm... Setting up new React Native app in Z:\HelloReactNative react@0.14.8 node_modules\react ├── envify@3.4.0 (through@2.3.8, jstransform@10.1.0) └── fbjs@0.6.1 (whatwg-fetch@0.9.0, loose-envify@1.1.0, ua-parser-js@0.7.10, promise@7.1.1, core-js@1.2.6) To run your app on iOS: cd Z:\HelloReactNative react-native run-ios - or - Open Z:\HelloReactNative\ios\HelloReactNative.xcodeproj in Xcode Hit the Run button To run your app on Android: Have an Android emulator running (quickest way to get started), or a device c onnected cd Z:\HelloReactNative react-native run-android
プロジェクトの作成が終わったら、次のようにしてpackagerサーバを起動する。
>cd HelloReactNative >react-native start ┌────────────────────────────────────── ──────────────────────────────────────┐ │ Running packager on port 8081. │ │ │ │ Keep this packager running while developing on any JS projects. Feel │ │ free to close this tab and run your own packager instance if you │ │ prefer. │ │ │ │ https://github.com/facebook/react-native │ │ │ └────────────────────────────────────── ──────────────────────────────────────┘ Looking for JS files in Z:\HelloReactNative [19:43:06] <START> Building Dependency Graph [19:43:06] <START> Crawling File System [Hot Module Replacement] Server listening on /hot React packager ready. [19:48:23] <END> Crawling File System (316991ms) [19:48:23] <START> Building in-memory fs for JavaScript [19:48:25] <END> Building in-memory fs for JavaScript (1723ms) [19:48:25] <START> Building in-memory fs for Assets [19:48:26] <END> Building in-memory fs for Assets (1356ms) [19:48:26] <START> Building Haste Map [19:48:27] <START> Building (deprecated) Asset Map [19:48:27] <END> Building (deprecated) Asset Map (442ms) [19:48:33] <END> Building Haste Map (6668ms) [19:48:33] <END> Building Dependency Graph (326752ms)
新しくコマンドプロンプトを開き、Androidアプリケーションをビルドする。
>cd HelloReactNative >react-native run-android JS server already running. Building and installing the app on the device (cd android && gradlew.bat install Debug... Downloading https://services.gradle.org/distributions/gradle-2.4-all.zip ................................................................................ ................................................................................ (snip) ................................................................................ ....................................................................... Unzipping C:\Users\user\.gradle\wrapper\dists\gradle-2.4-all\6r4uqcc6ovnq6ac6s0t xzcpc0\gradle-2.4-all.zip to C:\Users\user\.gradle\wrapper\dists\gradle-2.4-all\ 6r4uqcc6ovnq6ac6s0txzcpc0 Download https://jcenter.bintray.com/com/android/tools/build/gradle/1.3.1/gradle -1.3.1.pom Download https://jcenter.bintray.com/com/android/tools/build/gradle-core/1.3.1/g radle-core-1.3.1.pom (snip) Download https://jcenter.bintray.com/com/facebook/fresco/imagepipeline-okhttp/0. 8.1/imagepipeline-okhttp-0.8.1.aar :app:preBuild UP-TO-DATE :app:preDebugBuild UP-TO-DATE (snip) :app:assembleDebug :app:installDebug Installing APK 'app-debug.apk' on 'emulator-5554 - 5.1.1' Installed on 1 device. BUILD SUCCESSFUL Total time: 3 mins 17.058 secs Starting the app on emulator-5554 (C:\Users\user\AppData\Local\Android\Sdk/platf orm-tools/adb -s emulator-5554 shell am start -n com.helloreactnative/.MainActiv ity)... Starting: Intent { cmp=com.helloreactnative/.MainActivity }
ビルドが完了すると、Android仮想デバイスにアプリケーションがインストールされ、しばらくの間JavaScriptの読み込みを行った後、次のような画面が表示される。
文字数カウンタを書いてみる
HelloReactNativeディレクトリ内のindex.android.jsを開き、次のように書き換えてみる。
import React, { AppRegistry, Component, StyleSheet, Text, TextInput, View } from 'react-native'; class HelloReactNative extends Component { constructor(props) { super(props); this.state = {text: ""}; } onChangeText(text) { this.setState({text: text}); } render() { return ( <View style={styles.container}> <Text style={styles.heading}> Hello, React Native! </Text> <TextInput multiline={true} style={styles.textarea} placeholder="Type something..." value={this.state.text} onChangeText={this.onChangeText.bind(this)} /> <Text style={styles.result}> Count: {this.state.text.length} </Text> </View> ); } } const styles = StyleSheet.create({ container: { flex: 1, padding: 20, }, heading: { fontSize: 28, fontWeight: "bold", }, textarea: { height: 200, textAlignVertical: "top", marginTop: 10, marginBottom: 10, }, result: { }, }); AppRegistry.registerComponent('HelloReactNative', () => HelloReactNative);
上と同様にpackagerを起動し、別のコマンドプロンプトからアプリケーションをビルドする。
>react-native start
>react-native run-android
ビルドが終わると、Android仮想デバイスに次のような画面が表示される。
適当にテキストボックスに文字列を入力すると、入力するたびに文字数カウンタが更新されることが確認できる。