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仮想デバイスに次のような画面が表示される。
適当にテキストボックスに文字列を入力すると、入力するたびに文字数カウンタが更新されることが確認できる。
