過去にこんな記事を書いてて、react-nativeの型定義を手動で書き直してコンパイルするという変なことをやってたのですが、この方法をやらなくて済む構成を見つけました。

どうせなので、最初から手順を書いて整理したいと思います。因みにAndroidとWindows環境です。（Mac持ってないので試せない）

react-nativeのインストール

以下のサイトを参考にインストールしていきます。

facebook.github.io

npmから以下のコマンドでインストールします。

npm install react-native-cli -g

Android SDKとJDKをインストールして、それぞれのインストールフォルダに対してANDROID_HOMEとJAVA_HOME環境変数を定義します。

Androidは、Android SDK Tools, Android SDK Platform-tools, Android SDK Build-tools, Android 6.0(API23), Android Support Repositoryあたりをインストールしておけばよさそうです。

Visual Studio Emulator for AndroidをインストールしてAndroid 6.0のイメージをインストールしておきましょう。

Visual Studio Emulator for Android

プロジェクトの作成

react-nativeは、以下のコマンドでプロジェクトを作ります。

react-native init ReactNativeEdu

コマンドライン引数の最後がプロジェクト名になります。暫く待つとプロジェクトが作成されます。

動作確認

Visual Sutdio Emulator for Androidを起動してエミュレータを立ち上げます。そして、adbコマンドで以下のコマンドをうっておきます。

adb reverse tcp:8081 tcp:8081

プロジェクトのフォルダで以下のコマンドを打ちます。

react-native start

別のコマンドプロンプトでプロジェクトフォルダを開いて以下のコマンドをうってアプリを起動します。

react-native run-andorid

雛形で作成されている、以下の画面が表示されれば動作確認は完了です。

f:id:okazuki:20160111092815p:plain

TypeScriptの環境の作成

プロジェクトフォルダでcode .と打ち込んでVisual Studio Codeを立ち上げます。

srcフォルダを作って、そこでコマンドプロンプトを開いて以下のコマンドを打ち込んで型定義ファイルを取り込みます。

tsd init -y
tsd install react-native -s

srcフォルダにtsconfig.jsonを作成して以下の内容に編集します。

{
    "compilerOptions": {
        "target": "es6",
        "jsx": "react"
    },
    "exclude": [
    ]
}

ポイントはes6をターゲットに指定してるところです。これをしないと、react-nativeの型定義がそのままだと使えなくなります。

プロジェクトのルートで以下のコマンドをたたいてgulp関連のモジュールをインストールします。

npm install gulp gulp-typescript --save-dev

gulpfile.jsは以下のような感じです。

var gulp = require('gulp');
var ts = require('gulp-typescript');

gulp.task('build', function() {
    var project = ts.createProject('./src/tsconfig.json');
    return gulp.src('./src/**/*.{ts,tsx}')
        .pipe(ts(project))
        .js
        .pipe(gulp.dest('./src'));
});

TypeScriptファイルの作成

srcフォルダにHelloWorld.tsxという名前で以下の内容のファイルを作ります。

import React from 'react-native';

var {Text} = React;

export default class HelloWorld extends React.Component<{}, {}> {
    render() {
        return (
            <Text>こんにちは世界</Text>
        );
    }
}

ビルドしてHelloWorld.jsを生成します。そして、index.android.jsを以下のように書き換えます。

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 */
'use strict';

var React = require('react-native');
import HelloWorld from './src/HelloWorld';

var {
  AppRegistry
} = React;

AppRegistry.registerComponent('ReactNativeEdu', () => HelloWorld);