JavaScript
TypeScript
reactnative

ReactNative学習記 in 2016

More than 1 year has passed since last update.

普段は、Androidをメインで開発していて、たまにiOSやその他のサーバーサイドの開発を行うのですが、たまたまお仕事の関係で両環境用のアプリを作ることになり、かつ相手先もWeb屋さんということでReactNativeを使用しての開発をしております。
今回は、最近1週間ほどで、調べられるだけ調べたReactNativeの直近の情報などをまとめた私的な勉強の記録になります。

まだまだ初心者なので、ぜひコメントいただければと思います。

導入

ReactNativeの設定

# NodeとWatchmanを追加
$ brew install node
$ brew install watchman
# ReactNativeを追加
$npm install -g react-native-cli
# プロジェクトの作成
$ react-native init AwesomeProject
$ cd AwesomeProject
# 起動(それぞれ、エミュレーターをしている必要がある)
$ react-native run-ios
$ react-native run-android

参考リンク

TypeScriptの設定

インストールとTypescriptの設定

# Typescriptのインストール
$ npm install --save dev typescript
# Typingsのインストール
$ npm install typings --global
# srcフォルダの作成
$ mkdir src
$ cd src
# Typescriptの初期化
$ tsc --init
# Typingsの初期化
$ typings init
# ReactNativeの型定義ファイルの検索
$ typings search react-native
# ReactNativeの型定義ファイルのインストール
$ typings install dt~react dt~react-native --save --global
# NodeModulesに型定義ファイルがある場合のインストール
$ typings install npm:react-native-router-flux --save
# srcフォルダの追加
$ mkdir src

tsconfig.jsonファイルの編集

tsconfig.json
{
    "compilerOptions": {
        "target": "es6",
        "jsx": "react",
        "outDir": "build",
        "rootDir": "src",
        "allowSyntheticDefaultImports": true,
        "noImplicitAny": false,
        "experimentalDecorators": true,
        "preserveConstEnums": true,
        "allowJs": true,
        "sourceMap": true
    },
    "filesGlob": [
        "typings/index.d.ts",
        "src/**/*.ts",
        "src/**/*.tsx"
    ],
    "exclude": [
        "index.android.js",
        "index.ios.js",
        "build",
        "node_modules",
        "__tests__"
    ],
    "compileOnSave": false
}

typings.jsonファイルの確認
reactとreact-nativeの型定義が反映されていることを確認する

typings.json
{
  "name": "sampleapp",
  "dependencies": {},
  "globalDependencies": {
    "react": "registry:dt/react#0.14.0+20161024223416",
    "react-native": "registry:dt/react-native#0.34.0+20161025145826"
  }
}

.gitignoreに以下を追加する

build
typings

参考リンク

gulpの設定

gulpのインストール

$ npm install gulp --save-dev
$ npm install gulp-typescript --save-dev
$ npm install gulp-plumber--save-dev
$ npm install gulp-watch --save-dev
$ touch gulpfile.js

gulpfile.jsにスクリプトを記述する

gulpfile.js
var gulp = require('gulp');
var plumber = require('gulp-plumber');
var typescript = require('gulp-typescript');
var watch = require('gulp-watch');

var tsProject = typescript.createProject('./tsconfig.json');
var outDir = './build/';
var tsFiles = './src/**/*.{ts,tsx}';

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

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

gulpコマンドを使用

$ gulp watch

参考リンク

Fluxなどのライブラリの設定:

$ npm install flux --save
$ npm install events --save
$ npm install keymirror --save
$ npm install object-assign --save

コーディング

TypeScript

Flux

Redux

タグ一覧:

ライフサイクル(Componentクラス)

Mounting

These methods are called when an instance of a component is being created and inserted into the DOM:

  • constructor()
  • componentWillMount()
  • render()
  • componentDidMount()

Updating

An update can be caused by changes to props or state. These methods are called when a component is being re-rendered:

  • componentWillReceiveProps()
  • shouldComponentUpdate()
  • componentWillUpdate()
  • render()
  • componentDidUpdate()

Unmounting

This method is called when a component is being removed from the DOM:

  • componentWillUnmount()

Other APIs

Each component also provides some other APIs:

  • setState()
  • forceUpdate()

Class Properties

  • defaultProps
  • displayName
  • propTypes

Instance Properties

  • props
  • state

カスタムタグの作成:

//トップのとき。自動生成されているはず
AppRegistry.registerComponent('Sample', () => Sample);
//それ以外のとき。こっちは手動で書く
module.exports = Sample;

スタイル

  • flex -> weightと同様に割合を指定する
  • flexDirection -> 向きを指定する
    • row -> 横並び
  • flexWrap -> 回り込みの設定を行う
    • nowrap -> 回り込みなし※デフォルト
    • wrap -> 回り込みあり
  • justifyContent -> 親コンポーント内の子コンポーネントの配置を決める(directionの方向に対して)
    • flex-start -> 先頭から配置する※デフォルト
    • flex-end -> 後ろから配置する
    • center -> 真ん中に配置する
    • space-between -> 子コンポーネントを先頭と最後に配置し、均等なスペースを他の子コンポーネントの間に挟む
    • space-around -> 各子コンポーネントの均等なスペースを先頭の前、最後の後に加えて配置する
  • alignItems -> directionの方向とは別方向のサイズ合わせの配置を決める
    • stretch -> 子コンポーネントを伸ばして配置する※デフォルト
    • flex-start -> 子コンポーネントを先頭から配置する
    • flex-end -> 子コンポーネントを後ろに配置する
    • center -> 真ん中に配置する
  • alignSelf -> alignSelfはalignItemsで配置したものを子コンポーネント側で上書きする

画面遷移

IDE

DECO

https://www.decosoftware.com/

VS CODE

http://goo.gl/CchLSs

Nuclide.io

https://nuclide.io/

UNIFIED IDE

http://nuclide.io/docs/platforms/react-native/

PlayGround

https://rnplay.org/

まとめサイト

Use React Native

React Nativeのニュースサイトです。メルマガもあります。
http://www.reactnative.com/

js.coach

ReactとReact Nativeのライブラリ検索サイトです。
ライブラリの説明をみればなんとなく可能性をつかめるでしょう。
https://js.coach/react-native

awesome react native

各種ライブラリで見受けれる、まとめリポジトリです。
ざっと見るとReact Nativeがわかってくると思います。
https://github.com/jondot/awesome-react-native

55 ReactNative Examples

ReactNativeのサンプル集
https://react.rocks/tag/ReactNative

使用しそうなライブラリ

全体・設計

UI系

サンプルコード

設計がしっかりとしているRedux

シンプル系

Tips系

参考記事