みかづきメモ

学習したことのメモとか、日記とか、備忘録。

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

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


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

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

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

github.com

ということで、早速。

公式サイトの 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 に、自動コンパイル用のコードを入れておく。

// @ 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 ディレクトリに切り出しています。

// @ index.ios.js, index.android.js

/**
 * 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 じゃないので、注意。


で、コンポーネント

// @ src/components/application.tsx

/// <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 。

$ open ios/AwesomeProject.xcodeproj/

おわり。