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のほうが楽かもしれない感じがしますね。