React NativeをTypeScriptで（VS Code編）

2016/01/11追記：以下の記事を参照してください blog.okazuki.jp

react-nativeをVS CodeからTypeScriptでHello worldしてみました。エミュレータはVisual Studio Emulator for Androidです。

プロジェクトの作成

プロジェクトを作りたいフォルダにコマンドプロンプトで移動して以下のコマンドを打ち込みます。

react-native init helloreactnative

コマンドの実行が終わったら作成されたフォルダに移動して、VS Codeを立ち上げます。

cd helloreactnative
code .

TypeScriptの構成

srcフォルダを作ってその中で以下のコマンドを実行します。

mkdir src
cd src
tsd init -y
tsd install react-native -save

srcフォルダにtsconfig.jsonという名前でファイルを作って以下のように編集します。

{
    "compilerOptions": {
        "target": "es5",
        "module": "commonjs",
        "jsx": "react"        
    },
    "exclude": [
    ]
}

gulpfile.jsの作成

以下のコマンドプロジェクトのルートフォルダで打ち込んでgulpとgulp-typescriptをインストールします。

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'));
});

これでCtrl + Shift + Bでビルドが走るようになります。

型定義の修正

何故か型定義修正しないと動かないので修正しときます。src/typings/react-native/react-native.d.tsの最後を以下のように修正します。

declare module "react-native" {

    import ReactNative = __React
    export = ReactNative
}

declare var global: __React.GlobalStatic

declare function require( name: string ): any


//TODO: BGR: this is a left-over from the initial port. Not sure it makes any sense
declare module "Dimensions" {
    import * as React from 'react-native';

    interface Dimensions {
        get( what: string ): React.ScaledSize;
    }

    var ExportDimensions: Dimensions;
    export = ExportDimensions;
}

Hello worldの作成

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

import * as React from 'react-native';

var {Text, View, StyleSheet} = React;

var styles = StyleSheet.create({
    text: {
        fontSize: 24
    }
});

export = class HelloWorld extends React.Component<{}, {}> {
    render() {
        return (
            <View>
                <Text style={styles.text}>Hello world</Text>
            </View>
        );
    }
}

ビルドしてjsを生成しておきます。

そして、index.android.jsを以下の内容に書き換えます。

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

var React = require('react-native');
var {AppRegistry} = React;

var HelloWorld = require('./src/HelloWorld')
AppRegistry.registerComponent('helloreactnative', () => HelloWorld);

実行

Visual Studio Emulator for AndroidからAndroid 6.0のエミュレータを起動します。 そして、以下のコマンドを打って8081ポートの通信ができるようにしておきます。

adb reverse tcp:8081 tcp:8081

そして、以下のコマンドをたたいて開発サーバー？を立ち上げます。

react-native start

もう1枚コマンドプロンプトを立ち上げてHelloWorldを実行するコマンドをたたきます。

react-native run-android

以下のような画面が立ち上がればOKです。

感想

ビルドスクリプトさえ書いてしまえばVisual StudioよりもVisual Studio Codeのほうが楽かもしれない感じがしますね。