2

React と Relay でこのようなことをしようとしています- リストから単一のアイテムへのスムーズなアニメーション。

現在、リスト コンポーネント (リスト クエリ) と単一アイテム コンポーネント (ノード クエリ) がありますが、問題があります。これらは 2 つの異なる、分離されたビューとクエリであり、これら 2 つのビュー間をスムーズにアニメーション化する簡単な方法が思いつきません。

おそらく最も簡単な方法は、同じリスト項目を変換/スケーリングすることです:

React 部分は単純です。クリック時に画面サイズを計算し、リスト項目を全画面サイズに変換します。

データはどうですか？リレーでこのようなことは可能ですか? リスト クエリで単一のアイテムに対してより多くのデータを取得できますか、または同じコンポーネントでノード クエリを使用できますか? コンポーネントごとに 2 つのクエリを使用できますか?

// Simple list query example

export default Relay.createContainer(PostList, {
    initialVariables: {
        count: 10
    },
    fragments: {
        viewer: () => Relay.QL`
            fragment on Viewer {
                posts(first: $count) {
                    edges {
                        node {
                            id
                            title
                        }
                    }
                }
            }`
    }
})

// What if I needed to fetch "content" for a single item as well?
4

1 に答える 1