React Native

• React Native

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

• React Nativeとネイティブアプリでの開発の違いとは
• ReactNativeで何が出来るのかさっと知れるサイト、その他リンクまとめ
• React Nativeはアプリ開発者の夢を見るか？ - アニマネ開発日誌

• React native meetup ... プレゼン資料が見れる
  • React.js meetup × React Native meetup
    • What is React Native?
  • react-native meetup#4
  • react-native meetup#3
  • react-native meetup#2
  • react-native meetup#1

• create-react-native-app触ってみた！！
• create-react-native-appとexpoを使って10分でプッシュ通知を試す
• React Nativeアプリの開発環境をコマンド一発で構築する「create-react-native-app」

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

• ReactNative とFlutter パフォーマンス比較
• React Native導入ガイド - 環境構築からクロスプラットフォーム開発のメリットまでを理解する
• 【入門】はじめての React Native

• React Nativeでメモアプリを作ろう～作成画面の構築と実データの利用

開発 †

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

• 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コードを読み込むとアプリが実行される（読み込みには時間がちょっと時間がかかる）

• App.js が index.js に相当
• 以下のような従来のプログラムの場合、最後に「export default [クラス];」を追記

          :
  const SimpleApp = StackNavigator({
    Home: { screen: MainScreenNavigator },
    Chat: { screen: ChatScreen },
  });
  
  AppRegistry.registerComponent('SimpleApp', () => SimpleApp);
  
  export default App;  <== これを追記

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

• Building Standalone Apps - Expo

• exp のインストール

  $ npm install -g exp

Navigation †

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

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

• react-navigation（docs）
  • 元は Expo が作った ExNavigation らしい
  • 画面コンポーネントにナビゲーション用のデータを定義しなければならない
  • とりあえず Getting Started をやってみよう！

• 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 に登録するアプリケーション名と、それに対応するアプリを指定