react-native-skia

React Native Skia

カスタム描画が必要なタスクでは、Skia を使用します。アクセシビリティに配慮したネイティブコントロールと通常のレイアウトには、ネイティブビューを使用します。既存のアプリでは、依存関係やアーキテクチャを変更する前に、実際に固定されている Skia／React Native／React／Reanimated／Worklets のバージョン、対象プラットフォーム、レンダリングバックエンド、関連するコンポーネントを確認してください。

ワークロードに応じて選択する

アニメーション付きのプロパティを持つ安定したシーンには保持描画を、変化するコマンドリストの記録が妥当な場合には Picture を、同じテクスチャを共有するスプライトの反復には Atlas を使用します。高コストなモチーフを繰り返す場合、テクスチャの再利用が適切かどうかは、プロファイリングまたはワークロードに基づいて判断してください。シェーダーが図形より常に高速とは限りません。ぼかし、オーバードロー、テクスチャのアップロード、解像度、稼働中のリソース数が重要です。

意図する視覚的な階層、インタラクション、アセット、境界、モーション低減時の状態を定義してください。幅広いクリエイティブな依頼では、一貫性のある方向性を選んで進めます。小さな効果のためにデザインワークショップを必須にしないでください。以下の参考資料にある、有用なデザイン手法やプリミティブの選択方法は活用してください。

現在の統合ルール

バージョンに依存するセットアップについては、現在の契約を参照してください。ネイティブバイナリは、Skia の postinstall ダウンローダーではなく、パッケージ依存関係を通じて提供されます。標準的な修正として、任意のライフサイクルスクリプトを有効にしたり、Bun の trust エントリを追加したりしないでください。ビルドでプラットフォームパッケージが実際に解決されることを確認してください。

共有値や派生値は、描画プロパティに直接渡してください。アニメーションのためだけに、Skia の描画ノードを createAnimatedComponent/useAnimatedProps でラップしないでください。ネイティブのオーバーレイビューは別のケースです。Skia の色には Skia の interpolateColors を使用してください。React の状態やコンテキストに関する判断は、描画専用レンダラーの外で行うか、必要なコンテキストを意図的にブリッジしてください。Worklets もフレーム時間を消費します。

グループ化された状態では、現在の select API を使ってオブジェクトのフィールドにバインドできます。その状態に withTiming/withSpring オブジェクトをネストし、Reanimated が各フィールドをアニメーション化すると想定しないでください。代わりに、個別にアニメーション化した値、または計算済みの通常の値を使用してください。

非同期の画像／フォント／動画やシェーダーのコンパイル失敗に備えてください。折り返しや複数のスタイルを含むテキストには、Paragraph を優先してください。描画の原点、ラジアン、クリッピング、ペイント／レイヤーの意味を確認してから、視覚的な不具合をパフォーマンスの問題と判断してください。テクスチャを含むスナップショットでは、適切なレンダリングコンテキストでドキュメントに記載された非同期パスを使用し、任意の固定時間待つのではなく、実際にアセットの準備が整うのを待ってください。

ライフサイクルとアクセシビリティ

装飾的なループやフレームコールバックは、アンマウント時や画面外／バックグラウンドで不要になったときに、キャンセルするか無効化してください。意味のあるモーション低減時の静的状態を用意してください。Reanimated の useReducedMotion は起動時の設定を読み取ります。アプリの実行中にも設定の変更に対応する必要がある場合は、実際に変更を監視する設定サブスクリプションを使用してください。

関連するヒット領域と変換を、ラベル、フォーカス、キーボード／スクリーンリーダー操作、十分なヒットターゲットを備えたアクセシブルなネイティブコントロールにも反映してください。Canvas のアクセシビリティラベルでは、個々のインタラクティブな図形は公開されません。理想的なドラッグを一度試すだけでなく、連続するジェスチャー、キャンセル、境界の変更、マルチタッチを検証してください。関連するインタラクションでは、互換性のある Gesture Handler の世代を一つ使用してください。テンプレートのジェスチャー API は、選択したスタックに合わせて調整してください。

調査と検証

以前の正規表現監査は削除されています。依存関係の範囲からインストール済みバージョンを推測し、古くなった postinstall の修正を指示していたためです。代わりに、ロックファイル、依存関係の解決結果、ネイティブビルドのログ、実際のコンポーネントの状態、対象を絞ったソース検索を確認してください。コメントや隣接するコンポーネント内のトークンは、調査の手がかりにすぎません。

実際のプロジェクトで、適応したコンポーネントの型チェックを行ってください。該当する場合は、アセット、読み込み／エラー状態、密度、向き、フォント、タッチ／アクセシビリティ、Web での CanvasKit の読み込みを検証してください。代表的なデバイスで、リリースに近いビルドの GPU 負荷とメモリを含めてプロファイルしてください。モックや CanvasKit のテストは、ネイティブレンダリングの証明にはなりません。UI スレッドでの実行、ウォームアップフラグ、Atlas ノードがあっても、フレームレートが保証されるわけではありません。

パッチ、意図した効果、選択したプリミティブが適している理由、確認できた結果、残っているデバイス／ブラウザーでの確認事項を報告してください。測定していない作業を、GPU に優しい、またはほぼコストがかからないと表現しないでください。Graphite/@next は通常のアップグレードパスではなく、明示的に選択した実験として扱ってください。

タスクに必要なリファレンスを読み込む

• 現行の仕様：セットアップ、アセット、バージョン。
• 判断フロー：レンダリングプリミティブ。
• モーションデザイン：構成と視覚的な意図。
• パフォーマンス：測定済みのボトルネック。
• デバッグ：症状に応じた調査。
• レシピ：実装方法。
• テンプレート一覧：適応の出発点となる例。
• 評価：メンテナー向けの出力／トリガーチェック。

リファレンスとテンプレートはスキルに関連付けられたものであり、対象アプリ内のファイルではありません。テンプレートは出発点となるもので、現在のすべてのネイティブスタックで検証済みではありません。有用な設計を維持しながら、実際のインポート、ライフサイクル、セマンティクスを確認してください。