かずきのBlog@hatena

すきな言語は C# + XAML の組み合わせ。Azure Functions も好き。最近は Go 言語勉強中。日本マイクロソフトで働いていますが、ここに書いていることは個人的なメモなので会社の公式見解ではありません。

react-nativeをTypeScriptでいってみた

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

はじめに

react-nativeがWindowsでも動いた(Androidだけ)ので、試しにTypeScriptで書いてみたいとおもいます。

プロジェクトの作成

以下のコマンドを打ち込んでプロジェクトのひな型を作成します。

react-native init ReactNativeTypeScript

Visual Studioで開く

とりあえずVisual Studioで編集したいですよね?ということで、Visual Studioで開きます。 まず、From Existing Node.js codeでプロジェクトを作ります。 プロジェクト名はReactNativeTypeScriptで。

ウィザードが立ち上がるので、ReactNativeTypeScriptフォルダを選択してNextを押します。

プロジェクトの場所をReactNativeTypeScriptフォルダに設定してFinishを押します。

androidフォルダやiOSフォルダ以下をいったんプロじぇくtおから除外して再度プロジェクトに含めます。(必要なファイルが取り込まれてないので)

TypeScriptの設定を出すために、適当にTypeScriptのファイルを作って削除します。 プロジェクトのプロパティからTypeScriptビルドを選んでTSXファイルでのJSXコンパイルを応答に変更して保存します。

型定義ファイル

tsd install react-native

と打ち込んで型定義ファイルを取り込みます。プロジェクトにも含めておきます。そのままだと型定義間違ってるっぽいので、最後のほうを以下の内容から

declare module "react-native" {

    import ReactNative = __React
    export default 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 React from 'react-native';

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

    var ExportDimensions: Dimensions;
    export = ExportDimensions;
}

以下の内容に書き換えます

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

tsxファイルの作成

index.android.tsxという名前でTypeScriptファイルを作成します。 なぜかBuild ActionがContentに設定されるのでTypeScriptCompileに変更しておきます。もともとあるindex.android.jsは削除しておきます。

そして、コードを以下のように記述します。元あったファイルをTypeScript JSXに焼き直した感じです。

import * as React from 'react-native';
var {AppRegistry, StyleSheet, View, Text} = React;
var styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#F5FCFF'
    },
    welcome: {
        fontSize: 20,
        textAlign: 'center',
        margin: 10,
    },
    instructions: {
        textAlign: 'center',
        color: '#333333',
        marginBottom: 5,
    },
});

class HelloReactNative extends React.Component<{}, {}> {
    render() {
        return (
            <View style={styles.container}>
                <Text style={styles.welcome}>ようこそReact Nativeへ!</Text>
                <Text style={styles.instructions}>index.android.tsxを編集して始めよう</Text>
                <Text style={styles.instructions}>ふがふが~~~</Text>
            </View>
        );
    }
}

AppRegistry.registerComponent('ReactNativeTypeScript', () => HelloReactNative);

実行して動作確認

まず、開発サーバーを起動します。

react-native start

Visual Studio Emulator for Androidを立ち上げて以下のコマンドを実行します。

react-native run-android

実行すると、こんな感じの画面が出てきます。TypeScriptでも行けますね。

f:id:okazuki:20160110104615p:plain