React Native のバックアップ(No.3) - PukiWiki

[ トップ ] [ 新規 | 一覧 | 単語検索 | 最終更新 | ヘルプ | ログイン ]

バックアップ一覧
差分を表示
現在との差分を表示
ソースを表示
React Native へ行く。
- 1 (2017-05-10 (水) 18:19:51)
- 2 (2017-05-12 (金) 13:34:08)
- 3 (2017-05-12 (金) 17:52:17)
- 4 (2017-05-12 (金) 20:36:58)

React Native

React Nativeで変わるアプリ開発高木健介先生 - Schoo（スクー）

React native meetup ... プレゼン資料が見れる

Expo、iPhoneなどでReact Nativeアプリのリアルタイムプレビューが可能なPlaygroundサービス「Expo Sketch」を公開
Expo Sketch ... ここでコードを変更して保存する度に新規URLが発行されるので、これを通知すれば他の人に共有できる

開発 †

環境構築からプロジェクト作成、実行まで †

create-react-native-app のインストール
```
$ npm install -g create-react-native-app
```
スマートフォンにExpoをインストール
- Google Play などで「Expo」を検索してインストール
- わからない場合はExpo のサイトを参照のこと

プロジェクト作成

$ create-react-native-app [プロジェクト名]

プロジェクト起動

$ cd [プロジェクト名]
$ nom start

起動すると大きなQRコードが表示される
スマートフォンでExpoを起動し、QRコードを読み込むとアプリが実行される（読み込みには時間がちょっと時間がかかる）

スタンドアローン版へのビルド †

Building Standalone Apps - Expo

exp のインストール
```
$ npm install -g exp
```

Navigation †

やり方が乱立していてどれを選んだらいいのやら...

React.js × React Native meetup アンケート質問に答えたい ... これの一番最後に Navigation に関するQAがある
ReactNativeでページ遷移（ルーティング）を実装する
ReactNativeでページ遷移（ルーティング）を実装する②

react-navigation（docs）
- 元は Expo が作った ExNavigation らしい
- 画面コンポーネントにナビゲーション用のデータを定義しなければならない
- これが有力か？

react-router-native
- react-router の Native版なので、知見や感覚を使いまわせるのがメリット
- あまりネイティブとして自然な遷移にならないという噂

react-native-router-flux
- 簡単な遷移であればサッと作れるが、少し複雑なことをしようとすると闇しかない
- テストが非常に書きにくい
- 去年までのデファクトスタンダード

native-navigation
- React Conf 2017 で大々的にアナウンスされた AirBnB 製
- 導入が手間らしい

Navigation
- 標準で提供されている
- 状態を持たず、開発者がいい感じに制御できる
- 0.43以降、非推奨になった

Tips †

AppRegistry?.registerComponent('NativeApp?', () => App);
- Native に登録するアプリケーション名と、それに対応するアプリを指定