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

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 StudioSDKをインストールする。 インストール後、以下の環境変数を追加する。

  • ANDROID_HOME環境変数C:\Users\user\AppData\Local\Android\Sdkを追加
  • PATH環境変数C:\Users\user\AppData\Local\Android\sdk\toolsC:\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仮想デバイスを作成する。

f:id:inaz2:20160417073243p:plain

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の読み込みを行った後、次のような画面が表示される。

f:id:inaz2:20160417072520p:plain

文字数カウンタを書いてみる

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仮想デバイスに次のような画面が表示される。

f:id:inaz2:20160417072531p:plain

適当にテキストボックスに文字列を入力すると、入力するたびに文字数カウンタが更新されることが確認できる。

関連リンク