主にプログラミング関連のメモ帳 ♪(✿╹ヮ╹)ノ
書いてあるコードは自己責任でご自由にどうぞ。記事本文の無断転載は禁止です。
2016/01/25
1週間でモバイルアプリを作る必要性が出てきてしまったので、
さくっと作れそうな React Native でやってみます。
React Native は、 React.js を使って、 iOS, Android のネイティブなアプリが作れてしまう
正直意味分からないフレームワーク。
いつぞやに、 React + TypeScript で、だいたい1週間で実用できるアプリが作れてしまったので、
今回も採用したという感じです。
ちなみに、React + TypeScript で出来たものはこちら ↓
GitHub - mika-archived/Sagittarius
ということで、早速。
公式サイトの Getting Started 通りに、セットアップしていきます。
ツール導入
$ npm install -g react-native-cli
からの、プロジェクト作成。
それなりに時間がかかった記憶。
$ react-native init AwesomeProject
完了すると、 iOS, Android 両方のプロジェクトが作成されます。
次に、 TypeScript で開発するための準備。
ここを参考にしてやっていきました。
ディレクトリ構成は、こんな感じ。
|- .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 。
$ open ios/AwesomeProject.xcodeproj/
おわり。