Edited at

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系


参考記事