React Nativeでアプリケーションを作成する（または作成しない）ために知っておくべきことに関するいくつかのヒント。
iOS向けのアプリケーションを作成したことはありませんが、React.jsで少なくとも4つのプロジェクトに既に参加しており、objective-cに少し精通しており、Androidの開発プロセスに精通しています。
アプリケーションは非常に簡単です（todoリスト）が、これは良いスタートだと思います。
タスク：収益化を使用してタスクマネージャーを記述します。 invisionappにはインターフェースのドラフトがあり、残りは技術の問題です。
データフロー
Reactアプリケーションで最も重要なことは、最初からさまざまなコンポーネント間のデータフローと対話を適切に構築することです。 その場合、コンポーネントがデータをレンダリングするだけで、非同期呼び出しのシートや、「どこでも取り出せる」一連のロジックにはならない可能性があります。 Reduxライブラリーが役に立ちます。 どのように機能するかについては詳しく説明しません（情報はこちらとこちらにあります ）。
アプリケーションにはグローバル状態のストアが1つあります。 個々のコレクションを処理する複数のレデューサーから組み立てられます。 便宜上、 redux-thunkといくつかのdevtoolを接続してストアのステータスを追跡することもお勧めします。 残念ながら、ネイティブの場合、このようなものは見つかりませんでしたが、これは問題ではありません。 トレースステータスは10行で書き込まれます。
ミドルウェアコード
var i = 0 const devtools = store => next => action => { const result = next(action) if (console.group) { console.group(`#${i++}`, action.type, action) _(store.getState()).map((val, key) => { console.log(key, val) }) console.groupEnd() } return result }
Redux-thunkは、いくつかの非同期アクションを組み合わせたり、現在の状態を取得する必要があるアクションに必要です。 例：タスクの場合、別のコレクションに配置される結果を作成し、支払いを行い、タスクをアーカイブ済みとしてマークする必要があります。 これには、3つのコレクションと3つの異なるアクションが含まれます（すべて非同期）。
グローバル状態により、いつでもストアのスナップショットを作成し、別のデバイスにロードして、最初に見たものと同じものを見ることができます。 これにより、クラッシュレポートのバグを再生するプロセスが簡単になります（objective-cでも同じことを試してください）。 この考え方は新しいものではありません。reactのclojure-scriptラッパーはまったく同じアプローチを使用します。 ソリューションの長所と短所について話すプレゼンテーションがいくつかあります。 クラッシュレポートについては、 Crashlytics（現在はFabric.io）を使用しています。
さらに、グローバル状態によりナビゲーションが容易になります（そう思いました）。 実際、ネイティブナビゲーターのラッパーをフェンスし、操作のインデックスを作成し、componentWillReceivePropsのメソッド呼び出しでreduxアクションを複製する必要がありました。
コンポーネントコード
componentWillReceiveProps(props) { const routes = props.routes if (this.props.routes.opIndex != routes.opIndex) { switch(routes.lastAction) { case 'push': this.refs.navigator.push(routes.currentRoute) break case 'pop': this.refs.navigator.pop() break case 'replace': this.refs.navigator.replace(routes.currentRoute) break case 'replacePreviousAndPop': this.refs.navigator.replacePrevious(routes.currentRoute) InteractionManager.runAfterInteractions(() => { this.refs.navigator.pop() }) break } } }
promise（またはawait / async ES構文）を使用します。 reduxアクションからそれらを返す場合、たとえばブートローダーを簡単に作成できます。
パフォーマンスとレイアウト
レイアウトは、React Nativeで最も楽しいプロセスの1つです。 また、Androidはレイアウトにxmlを使用します。それが何に役立つかを理解しておくと便利です。 しかし、反応の中で、これがどのように機能するかをすでに知っています...こんにちは、世界を構成する必要がある場合:)実際、コンポーネントの予測できない動作を取得します。 「位置：絶対」はブラウザのように機能せず、flux-boxも異なる動作をします。画像は画像の幅と高さのサイズを自動的に設定しません。 あなたは何とかして何を書く必要があるかを知っていることがわかり、コードは実行されますが、私たちが望む方法には見えません。 適切なドキュメントとライブリロードのみが保存されますが、Androidのレイアウトよりも便利です。
階層に新しいビューを追加するたびに、「しかし、どのくらいの時間レンダリングされるか」という考えが頭に浮かびました。 長い間。 大きなコンポーネントは読み込み画面を実行する必要がありますが、facebookは警告します。 コンポーネントを作成するために何らかのロジックをハングアップする場合（たとえば、アプリケーションの起動時にリポジトリからデータをロードする場合）、InteractionManagerに注意してください。 最初に蓄積したすべてをレンダリングしてから、アクションを実行することができます。
アプリケーション全体のパフォーマンスに関しては、ネイティブアプリケーションよりもやや遅いことがわかります。 ただし、ほとんどのユーザーにとって、これは表示されません。 （たとえば、airbnbのように）サイドバーを描画したい場合は、reactが最適なソリューションではないため、ネイティブコンポーネントを記述する必要があります。 実装はありますが、残念ながら、まだライブラリの形ではありません。
別の例：NavigatorおよびNavigatorIOS。 1つ目はjsで、2つ目はネイティブコンポーネントとして記述されています。 NavigatorIOSは、長時間座ってシーン間の遷移を見ると高速になります:)繰り返しますが、ほとんどのユーザーは違いに気付くことすらありません。 全体の問題は、要素の位置のデータ管理とレンダリングが1つのストリームで発生するため、遅延が発生することです。 幸いなことに、ネイティブコンポーネントを作成する必要はありませんでした。InteractionManager呼び出しですべてを最適化し、コンポーネントを徐々にロードすることができました。
ユーザーからのイベントの処理にも注意が必要です。 TextInputを取得し、現在のコンポーネントの状態でvalue / onChageを作成すると、すべてが迅速に機能しますが、小道具を親コンポーネントに渡して処理を開始すると、100％のデバウンスが必要になります。 ところで、ブラウザでは高速に動作します。 TextInputに関するもう1つの注意点：iOSが自動置換という単語を置き換える場合、onChageTextは呼び出されません。 私はこの問題を解決せず、率直に言って、試みませんでした。 falseでautoCorrectを無効にできます。
サードパーティのライブラリ
サイドバー、メニューバー、進行中のcalendarな画像ダウンローダーまたはカレンダーが必要な場合は、既製のソリューションがあります。 ありますが、私たちが望むほど多くはありません。 選択肢はそれほど大きくないことがわかりました。 多くのコンポーネントは、グローバル状態からのレンダリングロジックにうまく適合しない制御メソッドを作成します。 私はもっと価値/ onChangeをしたい:)
どういうわけか図書館があり、自転車をたくさん書く必要はありませんでした。 さらに、リポジトリは常に更新されるため、ライブラリのバグを修正する前にプロジェクトでnpm updateを定期的に実行することを忘れないでください。
デバッグとテスト
これにより、反応は素晴らしいです。 アプリケーションを2つのデバイスで一度に実行できます（テストのためにiPhoneとiPadで実行しました）。たとえば、レイアウトを変更すると、変更は2つのデバイスで同時に表示されます。 とても快適です。 Google Chromeを使用してデバイスでデバッグする場合、いくつかの問題があります。 クロムが飛び出すこともあれば、アプリケーションがコンピューターに接続する時間がないこともあります。 前回、彼はコンソールに警告を流し始めたばかりで、時間がなくなったという事実のために。 これはまだモバイルアプリケーションであるため、経験することができます。
自動テストでは、jestを使用しました（他のテストランナーを使用できます）。 テストは、アクションとレデューサーのみを対象としました。 コンポーネントは多くあり、時間が限られているため、コンポーネントはカバーされません。 ネイティブコンポーネントの反応に関するテストに関する情報はほとんどありませんが、さらに深く掘り下げると、レイアウトをテストできるようにロックできます。
おわりに
私にとって、Web開発者として、react nativeの出現によりモバイルアプリケーションの開発が非常に簡単になりました。今では知識を別の分野に移すことができますが、少なくともiOS向けに作成するObjective-C構文を理解する必要があります。 React NativeとReact自体により、変化する顧客の要件に負担をかけることなく対応できます。 新しいタスクを受け取ったとき、おそらくそれを実装する方法をすでに知っているでしょう。
PS合計では、iosの開発に関する知識がまったくない状態でアプリケーションをゼロから作成するのに1か月以上かかりました。
スクリーンショット 
アプリケーションを記述する前のMastrid： facebook.github.io/react-native/docs/performance.html