react-native-paginationを使ってみる

React Nativeに最適なページネーションコンポーネント

これらを自分で試してみるのは簡単です。Xcodeでただexamples/ios/*.xcodeprojを開いてください。次にCmd + Rを押します。あなたはスイッチケースのためにexamples / index.ios.jsを編集することができます。

yarn add react-native-pagination

すべてのプロパティはテキストエディタの自動補完を考慮し、基本構造[prefix] [body] [suffix]に従います。ここでは[component name] [component attribute]
[continued component attribute / component change] 接頭辞を扱うときに公式のドキュメントを見直してください、オプションの完全なリストをユーザに提供するため。
最も一般的なコンポーネントプレフィックスオプション：dot、startDot、endDot
最も一般的なコンポーネント本体のオプション：Icon, Font,Style ,Color
最も一般的なコンポーネントサフィックスのオプション：Hide, Size,IconFamily ,or NotActive,Active Empty dotIconHide、startDotIconHide、またはstartFontSize、endDotStyleなどの結果のプロパティ

Prop	Default	Type	説明
paginationItems		array	配列のページネーション
paginationVisibleItems		array	React Native ListコンポーネントのonViewableItemsChangedコールバック関数を使用して取得した配列のページ分割表示項目（例を参照）
dotThemeLight	false	bool	dotThemeLightプロップを渡すと（trueに設定）、ページネーションドットは明るいテーマに切り替わります。デフォルトでは暗いです。
horizontal	false	bool	水平方向と垂直方向を切り替えるために使用します（リストコンポーネントで行うのと同じように）
dotAnimation	LayoutAnimation.Presets.easeInEaseOut	Animation	dot移動中に発生するアニメーション
paginationStyle	{}	style	ページネーションスタイル
pagingEnabled	false	bool	ページングを有効にします。これはReact Native List Components（FlatListのような）でも使われているpropsで、新しいページのスクロールを止めるページング効果があります。
hideEmptyDots	false	bool	空のdotを隠します
paginationItemPadSize	3	number	pagination Item Pad Size