問題タブ [react-animated]

次のような署名を持つスナックバーのようなステータス メッセージ コンポーネントを作成しようとしています。

"open" が true に設定されている場合、メッセージは画面にアニメーション表示され、一定時間そこにとどまり、その後再びアニメーション表示されなくなります。

したがって、以下のコードは正常に動作しますが、かなり一般的な使用例を除きます。古いメッセージが画面外にアニメーション化される前に、呼び出し元のコンポーネントが新しいメッセージを設定する場合。その場合、以下のコードは単に現在表示されているメッセージを置き換え、同じタイマーを使用します。

理想的には、新しいメッセージが追加されると、古いメッセージが最初に画面外でアニメーション化され、次に新しいメッセージでアニメーション化されます。(新しいメッセージ テキストが古いメッセージ テキストと同じであっても、これが確実に行われるようにしたいと思います。)

私はこのようなことをする方法を理解できないようです。私の推測では、StatusMsg は実際には、メッセージを含むアニメーション ビューを作成するためのファクトリである必要がありますが、それを機能させる方法がわかりません。具体的には、新しいメッセージの作成時に以前のメッセージを閉じる方法。

2 つのフラットリストがあり、1 つはデータ (dataScroll) を含み、もう 1 つはすべてのデータ項目のチェックボックス (checkScroll) を含みます。

この理由は、ユーザーが dataScroll を水平方向にスクロールしている間、チェックボックスを常に表示する必要があるためです (dataScroll を水平方向にスクロール可能なスクロールビューに配置しました)。

デモ：

エキスポスナックデモ

これまでに試した：

dataScroll のスクロール イベントで、y オフセットを取得し、checkScroll をその y 位置に移動しました。

それは（ほとんど）仕事をしますが、スクロール中に2つのフラットリストの間に大きな遅延があります。

--

アニメーション化されたコンポーネントの使用が進んでいる可能性があることを読みましたが、反応ネイティブでアニメーションがどのように機能するかを理解できませんでした。

したがって、2つのフラットリストをバインドして、一方のリストをスクロールすると、もう一方のリストが遅延なしで（または少なくとも最小限の）遅延で追従するようにする方法について、助けを求めたいと思います。

dataScroll フラットリストのみがスクロール可能であれば、それも問題ありません。