LoginSignup
17
18

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

@Reyurnible(shun hosaka)in株式会社リクルートマーケティングパートナーズ

ReactNative学習記 in 2016

Last updated at Posted at 2016-11-11

普段は、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に以下を追加する

.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

VS CODE

Nuclide.io

UNIFIED IDE

PlayGround

まとめサイト

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系

参考記事

17
18
1

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
17
18

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?