React Native + Redux + TypeScript でモバイル開発 -セットアップ-

１週間でモバイルアプリを作る必要性が出てきてしまったので、
さくっと作れそうな React Native でやってみます。

React Native は、 React.js を使って、 iOS, Android のネイティブなアプリが作れてしまう
正直意味分からないフレームワーク。

いつぞやに、 React + TypeScript で、だいたい１週間で実用できるアプリが作れてしまったので、
今回も採用したという感じです。

ちなみに、React + TypeScript で出来たものはこちら ↓

ということで、早速。

公式サイトの Getting Started 通りに、セットアップしていきます。

ツール導入

$ npm install -g react-native-cli

からの、プロジェクト作成。
それなりに時間がかかった記憶。

$ react-native init AwesomeProject

完了すると、 iOS, Android 両方のプロジェクトが作成されます。

次に、 TypeScript で開発するための準備。
ここを参考にしてやっていきました。

blog.okazuki.jp

ディレクトリ構成は、こんな感じ。

|- .flowconfig
|- .git
|- gitignore
|- .watchmanconfig
|- android
|- app
|- gulpfile.json
|- index.android.js
|- index.ios.js
|- ios
|- package.json
|- src
|  |- actions
|  |- components
|  |- containers
|  |- reducers
|  |- typings
|  |- tsconfig.json
|- tsd.json

src 以下に TypeScript コードを、 app 以下に、コンパイル結果の .js を出力する。
そのため、 gulpfile.js に、自動コンパイル用のコードを入れておく。

var plumber = require("gulp-plumber");
var typescript = require("gulp-typescript");
var watch = require("gulp-watch");

var tsProject = typescript.createProject("./src/tsconfig.json");
var appDir = "./app/";
var tsFiles = "./src/**/*.{ts,tsx}";

gulp.task("ts:compile", function () {
  return gulp
    .src(tsFiles)
    .pipe(plumber())
    .pipe(typescript(tsProject))
    .pipe(gulp.dest(appDir));
});

// Auto compile
gulp.task("watch", function () {
  watch(tsFiles, function () {
    gulp.run("ts:compile");
  });
});

で、 index.*.js を下のように修正。
元あったレイアウトは、 components ディレクトリに切り出しています。

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

import {Application} from './app/components/application'
import {AppRegistry} from 'react-native';

AppRegistry.registerComponent('TieApp', () => Application);

./src/components/application じゃないので、注意。

で、コンポーネント。

/// <reference path="../typings/tsd.d.ts" />

import * as React from 'react';
import {Text, View, StyleSheet} from 'react-native';


export class Application extends React.Component<any, any> {

  styles: any = 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
    }
  });

  public render() {
    return (
      <View style={this.styles.container}>
        <Text style={this.styles.welcome}>
          Welcome to React Native!
        </Text>
        <Text style={this.styles.instructions}>
          To get started, edit index.ios.js
        </Text>
        <Text style={this.styles.instructions}>
          Press Cmd+R to reload, {'\n'}
          Cmd+D or shake for dev menu.
        </Text>
      </View>
    );
  }
}

ここまで出来たら、プロジェクトを開いて、ビルドすれば OK 。