IT分からんわ~_~;

IT色々お勉強中のブログ

react-native-paginationを使ってみる

www.npmjs.com

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

Roadmap

github.com

Horizontal

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

試しかた

yarn add react-native-pagination

Properties

  • すべてのプロパティはテキストエディタの自動補完を考慮し、基本構造[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