react-native-reanimated-carousel

bugが多すぎる

https://gyazo.com/34460e499b39e84f443856300dcd75f6

どうやってスムーズにかつ無限にループを実現しているか

データを作り変えたりしているわけではない

作り変えたら再レンダリングされてしまうしなあ

全てアニメーション上でのみの計算で実現している

今どれぐらいスワイプしているか、今何が表示されているか、などを細かく見て、

それに合わせてアイテムの位置を入れ替えて見せることで、

無限にループした挙動が可能になっている

code:_

./src

├── Carousel.tsx # RNRCコンポーネントの「エントリーファイル」

├── LazyView.tsx # ShouldUpdateプロップが要素を表示するかどうかを制御

├── ScrollViewGesture.tsx # ジェスチャーロジックの「エントリーファイル」

├── constants

│ └── index.ts # 定数が定義されている

├── hooks

│ ├── useAutoPlay.ts # 自動再生の管理

│ ├── useCarouselController.tsx # マルチキャストグラフの動作（前、次…）を管理するコントローラー

│ ├── useCheckMounted.ts # ホイールキャストダイアグラムがマウントされているか確認

│ ├── useCommonVariables.ts # Propsから共通の変数を取得

│ ├── useInitProps.ts # 渡されたPropsの初期化

│ ├── useLayoutConfig.ts # パララックス、水平スタック… 異なるanimationStylesを返す

│ ├── useOffsetX.ts # 最後のスライドを開始位置に移動する際のコアロジック

│ ├── useOnProgressChange.ts # スクロール進行状況の変化を監視

│ ├── usePropsErrorBoundary.ts # Propsの設定エラーをキャッチ

│ └── useVisibleRanges.tsx # カルーセル要素の可視範囲を管理

├── index.tsx

├── layouts # 基本的なレイアウトが定義されている

│ ├── BaseLayout.tsx

│ ├── index.tsx # 定義された様々なanimationStylesを返すレイアウトのエントリーファイル

│ ├── normal.ts

│ ├── parallax.ts

│ └── stack.ts

├── store

│ └── index.ts # Propsおよびいくつかの基本変数のためのContextStore

├── types.ts # 型定義

└── utils # ツールメソッド集

├── dealWithAnimation.ts # Spring/Timingアニメーションタイプの両方をカプセル化して処理