メインコンテンツへスキップ

タイマー

タイマーはアプリケーションの重要な部分であり、React Nativeはブラウザタイマーを実装しています。

タイマー

  • setTimeout、clearTimeout
  • setInterval、clearInterval
  • setImmediate、clearImmediate
  • requestAnimationFrame、cancelAnimationFrame

requestAnimationFrame(fn)setTimeout(fn, 0)とは異なります。前者はすべてのフレームの描画が完了した後に実行されますが、後者は可能な限り早く実行されます(iPhone 5Sでは秒間1000回以上)。

setImmediateは、現在のJavaScript実行ブロックの最後に、バッチ処理されたレスポンスをネイティブに送り返す直前に実行されます。setImmediateコールバック内でsetImmediateを呼び出す場合、すぐに実行され、その間にネイティブに制御を戻しません。

Promiseの実装は、非同期処理の実装としてsetImmediateを使用しています。

注記

Androidでデバッグする際、デバッガーとデバイス間の時刻にずれが生じていると、アニメーション、イベントの動作などが正しく動作しない、または結果が正確でない場合があります。デバッガーマシンでadb shell "date `date +%m%d%H%M%Y.%S%3N`"を実行して修正してください。実機で使用するには、root権限が必要です。

InteractionManager

よく作られたネイティブアプリが非常に滑らかに感じる理由の1つは、インタラクションやアニメーション中に高負荷な操作を避けることです。React Nativeでは現在、単一のJS実行スレッドしか存在しないという制限がありますが、InteractionManagerを使用して、長時間の作業が、インタラクション/アニメーションの完了後に開始されるようにスケジュールできます。

アプリケーションは、以下の方法でインタラクション後に実行されるタスクをスケジュールできます。

InteractionManager.runAfterInteractions(() => {
// ...long-running synchronous task...
});

他のスケジューリング方法との比較

  • requestAnimationFrame(): 時間をかけてビューをアニメーション化するコード用。
  • setImmediate/setTimeout/setInterval(): 後でコードを実行します。アニメーションが遅れる可能性があります。
  • runAfterInteractions(): 後でコードを実行します。アクティブなアニメーションを遅らせることはありません。

タッチ処理システムは、1つまたは複数のアクティブなタッチを「インタラクション」と見なし、すべてのタッチが終了またはキャンセルされるまでrunAfterInteractions()コールバックを遅延させます。

InteractionManagerを使用すると、アプリケーションは、アニメーション開始時にインタラクション「ハンドル」を作成し、完了時にそれをクリアすることで、アニメーションを登録することもできます。

const handle = InteractionManager.createInteractionHandle();
// run animation... (`runAfterInteractions` tasks are queued)
// later, on animation completion:
InteractionManager.clearInteractionHandle(handle);
// queued tasks run if all handles were cleared