web-dev-qa-db-ja.com

React Native Card Carousel view？

enter image description here

React Nativeでこの種のビューをどのように達成できるかを知っている人はいますか、またはこの問題に役立つ利用可能なコンポーネントがありますか？

F8 2016アプリでも見ましたが、水平スクロールでトランジションとカルーセルのようなビューを実現する方法を探していました。

javascriptiosfacebookreact-native
12
vizFlux

これは、iOSで ScrollViewページングが有効 およびAndroidで ViewPagerAndroid を使用して実現できます。

F8はオープンソースアプリであるため、実際に使用していることがわかります。 https://github.com/fbsamples/f8app/blob/master/js/common/ViewPager.js

このコンポーネントはすべてのページをレンダリングします。

メモリを節約するために可視ページと左ページと右ページのみをレンダリングしたい場合は、その上に別のコンポーネントが構築されており、それを実行します。 https://github.com/fbsamples/f8app/blob/master/ js/common/Carousel.js

他にもさまざまな類似の実装があります。

しかし、私は https://github.com/leecade/react-native-swiper をお勧めしていません。いくつかの問題がありました。

15
Jean Regisser

質問が古いことは知っていますが、同僚と私は最近、この特定のニーズに応えるコンポーネントを作成する必要がありました。最終的にはオープンソース化したので、試してみるのはあなた次第です react-native-snap-carousel 。

プラグインはFlatList（バージョン> = 3.0.0）の上に構築され、膨大な数のアイテムを処理するのに最適です。また、プレビュー（変更後の効果）、スナップ効果 、視差画像、RTLサポートなど。

showcase を見て、何が達成できるかを把握してください。プラグインとの経験を共有することをheしないでください。私たちは常に改善を試みています。

react-native-snap-carousel archriss showcasereact-native-snap-carousel archriss aix

編集： 2つの新しいレイアウト バージョン3.6.0（1枚はカードエフェクトのスタック、もう1枚は火口のようなエフェクト）。楽しい！

react-native-snap-carousel stack layoutreact-native-snap-carousel tinder layout

19
bend

世界のベストを主張するswiper-コンポーネントについて言えば、それはまだ（2018年11月現在）公式 swiper-react-nativeドキュメント 。この問題と回避策は swiper issue 444 で説明されています。

エラーメッセージ（Android）では、_console.error: "fontFamily 'Arial' is not a system font and has not been loaded through Exponent.Font.loadAsync._と表示されます

ザック・ディクソン エレガントなクイックフィックスを提供しました。 render()- function内で次のJSXスニペットを使用するだけで、新しいフォントが必要になることを回避できます。

_<Swiper style={styles.wrapper} showsButtons={true} 
        nextButton={<Text>&gt;</Text>} prevButton={<Text>&lt;</Text>}>
  <View style={styles.slide1}><Text style>Slide 1</Text></View>
  <View style={styles.slide2}><Text style>Slide 2</Text></View>
  <View style={styles.slide3}><Text style>Slide 3</Text></View>
</Swiper>
_

Scroll-Viewのみでカルーセルを実装する方法の説明に興味がある場合は、 ScrollViewを使用した簡単な画像カルーセルのチュートリアル をお勧めします。チュートリアルは簡単で、面倒を見る必要がありますが、他のView要素の内部または上部でそのまま使用することはできません。特に、スナップはうまく機能しません（Androidの場合）。

0
B--rian