recyclerlistview
Version 4.2.1
หากโครงการนี้ช่วยคุณได้โปรดสนับสนุนเราด้วยดาว?
นี่คือ ListView ที่มีประสิทธิภาพสูงสำหรับ React Native และ Web ด้วยการสนับสนุนเลย์เอาต์ที่ซับซ้อน JS เท่านั้นที่ไม่มีการพึ่งพาอาศัยพื้นเมืองซึ่งได้รับแรงบันดาลใจจากทั้ง Recyclerview บน Android และ UICollectionView บน iOS
npm install --save recyclerlistview
สำหรับเบต้าล่าสุด:
npm install --save recyclerlistview@beta
หมายเหตุ: เอกสารจะได้รับการอัพเกรดเร็ว ๆ นี้สำหรับตอนนี้ตรวจสอบความคิดเห็นของรหัสเพื่อความชัดเจนและคุณสมบัติการสำรวจ ส่วนประกอบนี้ได้รับการทดสอบอย่างแข็งขันด้วย React Native Web เช่นกัน
RecyclerListView ใช้ "การรีไซเคิลเซลล์" เพื่อนำมุมมองที่ไม่สามารถมองเห็นได้อีกต่อไปเพื่อแสดงรายการแทนการสร้างวัตถุมุมมองใหม่อีกต่อไป การสร้างวัตถุมีราคาแพงมากและมาพร้อมกับค่าใช้จ่ายของหน่วยความจำซึ่งหมายความว่าเมื่อคุณเลื่อนดูรายการรอยเท้าหน่วยความจำยังคงดำเนินต่อไป การปล่อยไอเท็มที่มองไม่เห็นออกจากหน่วยความจำเป็นอีกเทคนิคหนึ่ง แต่มันนำไปสู่การสร้างวัตถุที่มากขึ้นและคอลเลกชันขยะมากมาย การรีไซเคิลเป็นวิธีที่ดีที่สุดในการแสดงรายการที่ไม่มีที่สิ้นสุดซึ่งไม่ส่งผลต่อประสิทธิภาพหรือประสิทธิภาพของหน่วยความจำ
นอกเหนือจากการแสดงผลประโยชน์ทั้งหมด RecyclerListView มาพร้อมกับคุณสมบัติที่ยอดเยี่ยมนอกกรอบ:
forceNonDeterministicRendering )RecyclerListView ถูกสร้างขึ้นโดยคำนึงถึงประสิทธิภาพซึ่งหมายความว่าไม่มีช่องว่างในขณะที่เลื่อนอย่างรวดเร็วหรือลดลงเฟรม RecyclerListView สนับสนุนให้คุณมีความสูงที่กำหนดไว้สำหรับรายการที่คุณต้องการแสดงผล นี่ไม่ได้หมายความว่าคุณต้องมีรายการที่มีความสูงและสิ่งของทั้งหมดทั้งหมดสิ่งที่คุณต้องมีคือวิธีดูข้อมูลและคำนวณความสูงล่วงหน้าเพื่อให้ RecyclerListView สามารถคำนวณเค้าโครงในหนึ่งผ่านแทนที่จะรอการวาดที่จะเกิดขึ้น คุณยังสามารถทำ gridviews และ listviews ได้ทุกประเภทด้วยรายการประเภทต่าง ๆ ซึ่งทั้งหมดรีไซเคิลได้ในวิธีที่เหมาะสม การรีไซเคิลตามประเภทนั้นง่ายมากที่จะทำและออกมาจากกล่อง
ในกรณีที่คุณไม่สามารถกำหนดความสูงของรายการล่วงหน้าได้เพียงกำหนด forceNonDeterministicRendering prop เป็น TRUE บน RecyclerListView ตอนนี้มันจะรักษามิติที่กำหนดเป็นการประมาณการและปล่อยให้รายการปรับขนาด พยายามให้การประเมินที่ดีเพื่อปรับปรุงประสบการณ์
การผลิตวิดีโอการสาธิตร้านขายของชำ Flipkart (หรือลองใช้แอพ): https://youtu.be/6yqeqp3mmou
การโหลด/ดูการเปลี่ยนแปลงที่ไม่มีที่สิ้นสุด (Expo): https://snack.expo.io/@naqvitalha/rlv-demo
Viewtypes ผสม: https://snack.expo.io/b1gyad52b
ExtendedState, StableIds และ Itemanimator (Expo): https://snack.expo.io/@arunreddy10/19bb8e
ตัวอย่างโครงการ: https://github.com/naqvitalha/travelmate
ตัวอย่างเว็บ (ใช้ RNW): https://codesandbox.io/s/k54j2zx977, https://jolly-engelbart-8ff0d0.netlify.com/
ตัวอย่างการอนุรักษ์บริบท: https://github.com/naqvitalha/recyclerlistview-context-preservation-demo
วิดีโออื่น ๆ : https://www.youtube.com/watch?v=TNV4HMMPGMC
| ข้อต่อ | ที่จำเป็น | ประเภทพารามิเตอร์ | คำอธิบาย |
|---|---|---|---|
| layoutprovider | ใช่ | Baselayoutprovider | ฟังก์ชันตัวสร้างที่กำหนดเค้าโครง (ความสูง / ความกว้าง) ของแต่ละองค์ประกอบ |
| Dataprovider | ใช่ | Dataprovider | ฟังก์ชั่นคอนสตรัคเตอร์กำหนดข้อมูลสำหรับแต่ละองค์ประกอบ |
| บริบท | เลขที่ | บริบท | ใช้เพื่อรักษาตำแหน่งการเลื่อนในกรณีที่มุมมองถูกทำลายซึ่งมักจะเกิดขึ้นกับการนำทางกลับ |
| นักเล่นโรว์เรนเดอร์ | ใช่ | (ประเภท: สตริง | หมายเลขข้อมูล: ใด ๆ , ดัชนี: หมายเลข) => jsx.element | jsx.element [] | โมฆะ | วิธีการที่ส่งคืนองค์ประกอบปฏิกิริยาที่จะแสดงผล คุณจะได้รับประเภทข้อมูลดัชนีและการขยายมุมมองในการโทรกลับ |
| itialoffset | เลขที่ | ตัวเลข | ออฟเซ็ตเริ่มต้นที่คุณต้องการเริ่มการแสดงผลจาก; สิ่งนี้มีประโยชน์มากหากคุณต้องการรักษาบริบทการเลื่อนข้ามหน้า |
| renderaheadoffset | เลขที่ | ตัวเลข | ระบุจำนวนพิกเซลล่วงหน้าที่คุณต้องการให้แสดงผล การเพิ่มค่านี้สามารถช่วยลดช่องว่าง (ถ้ามี) อย่างไรก็ตามการรักษาสิ่งนี้ให้ต่ำที่สุดเท่าที่จะเป็นไปได้ควรเป็นเจตนา ค่าที่สูงขึ้นยังเพิ่มการคำนวณซ้ำอีกครั้ง |
| ishorizontal | เลขที่ | บูลีน | หากเป็นจริงรายการจะทำงานในแนวนอนมากกว่าแนวตั้ง |
| onscroll | เลขที่ | rawevent: scrollevent, Offsetx: หมายเลข, adfsety: number) => void | บนฟังก์ชั่นการโทรกลับแบบเลื่อนที่ทำงานเป็นสกรอลล์ของผู้ใช้ |
| สร้างใหม่ | เลขที่ | (params: onrecreateparams) => โมฆะ | ฟังก์ชั่นการโทรกลับที่ได้รับการดำเนินการเมื่อสร้างมุมมอง Recycler จากผู้ให้บริการบริบทใหม่ |
| ExternalsCrollView | เลขที่ | {ใหม่ (อุปกรณ์ประกอบฉาก: ScrollViewDefaultProps): BasesCrollView} | ใช้สิ่งนี้เพื่อส่งผ่านการใช้งาน BasesCrollView ของคุณ |
| ที่ได้รับ | เลขที่ | () => โมฆะ | ฟังก์ชั่นการโทรกลับดำเนินการเมื่อสิ้นสุดมุมมอง (ลบ onendthreshold ถ้ากำหนด) |
| onendreachedthreshold | เลขที่ | ตัวเลข | ระบุจำนวนพิกเซลล่วงหน้าสำหรับการโทรกลับแบบ onendreached |
| onendreachedthresholdRelative | เลขที่ | ตัวเลข | ระบุว่าไกลจากจุดสิ้นสุด (ในหน่วยที่มีความยาวที่มองเห็นได้ของรายการ) ขอบด้านล่างของรายการจะต้องมาจากส่วนท้ายของเนื้อหาเพื่อเรียกการโทรกลับแบบ onendreached |
| onvisibleIndices changed | เลขที่ | tonitemstatuschanged | จัดทำดัชนีที่มองเห็นได้ มีประโยชน์ในการส่งเหตุการณ์ความประทับใจ |
| OnvisibleIndexeschanged | เลขที่ | tonitemstatuschanged | (เลิกใช้ใน 2.0 เบต้า) ให้ดัชนีที่มองเห็นได้ มีประโยชน์ในการส่งเหตุการณ์ความประทับใจ |
| renderfooter | เลขที่ | () => JSX.Element | jsx.element [] | โมฆะ | ให้วิธีนี้หากคุณต้องการแสดงส่วนท้าย มีประโยชน์ในการแสดงตัวโหลดในขณะที่ทำการโหลดที่เพิ่มขึ้น |
| InitialRenderIndex | เลขที่ | ตัวเลข | ระบุดัชนีรายการเริ่มต้นที่คุณต้องการให้การแสดงผลเริ่มต้นจาก ที่ต้องการมากกว่า itialoffset ถ้าทั้งสองระบุ |
| ม้วนเกลียว | เลขที่ | ตัวเลข | iOS เท่านั้น; ระยะเวลาเค้นม้วน |
| canchangesize | เลขที่ | บูลีน | ระบุว่าขนาดสามารถเปลี่ยนแปลงได้หรือไม่ |
| ระยะทางจากวิงด์ | เลขที่ | ตัวเลข | (depricated) ใช้ applyWindowCorrection() API พร้อม windowShift การใช้งาน? |
| ใช้ WindowCorrection | เลขที่ | (ออฟเซ็ต: หมายเลข, windowcorrection: windowcorrection) => โมฆะ | (การเพิ่มประสิทธิภาพ/การแทนที่ไปยัง distanceFromWindow API) ช่วยให้การอัปเดตของหน้าต่างที่มองเห็นได้เป็นไปตามค่าของราชทัณฑ์ที่ผ่าน ผู้ใช้สามารถระบุ windowshift ; ในกรณีที่ recyclerlistwindow ทั้งหมดจำเป็นต้องลดลง/ขึ้น เริ่มต้นการแก้ไข ; ในกรณีที่หน้าต่างด้านบนต้องถูกเลื่อนออกไปสำหรับหน้าต่างด้านบนที่ถูกผูกไว้ที่จะเลื่อนลงคือเนื้อหาที่ซ้อนทับขอบด้านบนของ RecyclerListView, EndCorrection : หากต้องการเปลี่ยนหน้าต่างด้านล่างที่ถูกผูกไว้สำหรับกรณีการใช้งานที่คล้ายกัน การใช้งาน? |
| usewindowscroll | เลขที่ | บูลีน | เว็บเท่านั้น; องค์ประกอบเลย์เอาต์ในหน้าต่างแทนที่จะเป็น div ที่เลื่อนได้ |
| การปนเปื้อน | เลขที่ | บูลีน | ปิดการรีไซเคิล |
| forcenondeterministicrendering | เลขที่ | บูลีน | ค่าเริ่มต้นเป็นเท็จ หากเปิดใช้งานมิติที่ให้ไว้ในผู้ให้บริการเลย์เอาต์จะไม่ถูกบังคับใช้อย่างเคร่งครัด ใช้สิ่งนี้หากไม่สามารถกำหนดขนาดรายการได้อย่างถูกต้อง |
| ExtendedState | เลขที่ | วัตถุ | ในบางกรณีข้อมูลที่ส่งผ่านในระดับแถวอาจไม่มีข้อมูลทั้งหมดที่ขึ้นอยู่กับคุณสามารถเก็บข้อมูลอื่น ๆ ทั้งหมดไว้ข้างนอกและส่งผ่านผ่านเสานี้ การเปลี่ยนวัตถุนี้จะทำให้ทุกอย่างทำให้เกิดใหม่ ตรวจสอบให้แน่ใจว่าคุณไม่เปลี่ยนแปลงบ่อยครั้งเพื่อให้แน่ใจว่าประสิทธิภาพ การแสดงใหม่นั้นหนัก |
| เครื่องเขียน | เลขที่ | เครื่องเขียน | เปิดใช้งาน Animating RecyclerListView เซลล์ (shift, เพิ่ม, ลบ ฯลฯ ) |
| สไตล์ | เลขที่ | วัตถุ | เพื่อส่งผ่านสไตล์ไปยัง Scrollview ภายใน |
| ScrollViewProps | เลขที่ | วัตถุ | สำหรับอุปกรณ์ประกอบฉากทั้งหมดที่จำเป็นต้องได้รับพร็อกซีไปยัง ScrollView ภายใน/ภายนอก วางไว้ในวัตถุและพวกเขาจะแพร่กระจายและผ่านไป |
| จัดวางเค้าโครง | เลขที่ | มิติ | จะป้องกันการเรนเดอร์ที่ว่างเปล่าเริ่มต้นที่จำเป็นในการคำนวณขนาดของ ListView และใช้ขนาดเหล่านี้เพื่อแสดงรายการรายการในการแสดงผลแรก สิ่งนี้มีประโยชน์สำหรับกรณีเช่นการแสดงผลด้านเซิร์ฟเวอร์ Prop canchangesize จะต้องตั้งค่าเป็นจริงหากขนาดสามารถเปลี่ยนแปลงได้หลังจากการแสดงผล โปรดทราบว่านี่ไม่ใช่ขนาดมุมมองเลื่อนและใช้สำหรับการจัดวางเท่านั้น |
| onitemlayout | เลขที่ | ตัวเลข | ฟังก์ชั่นการโทรกลับที่ดำเนินการเมื่อรายการของ RecyclerListView (ที่ดัชนี) ได้รับการจัดวาง นอกจากนี้ยังสามารถใช้เป็นพร็อกซีไปยังรายการเรียกกลับชนิดของรายการ |
| WindowCorrectionConfig | เลขที่ | วัตถุ | ใช้เพื่อระบุคือการกำหนดค่าการแก้ไขหน้าต่างและควรนำไปใช้กับเหตุการณ์การเลื่อนบางส่วน |
สำหรับชุดคุณสมบัติเต็มรูปแบบให้ดูคำจำกัดความของเสาของ RecyclerListView (ด้านล่างของไฟล์) คุณสมบัติ ScrollView ทั้งหมดเช่น RefreshControl ยังทำงานนอกกรอบ
applyWindowCorrection ใช้เพื่อเปลี่ยนขอบเขตหน้าต่างที่มองเห็นได้ของ RecyclerListView แบบไดนามิก Windowcorrection ของ RecyclerListView พร้อมกับออฟเซ็ตสกรอลล์ปัจจุบันจะสัมผัสกับผู้ใช้ วัตถุ windowCorrection ประกอบด้วย 3 ค่าตัวเลข:
windowShift - การแทนที่พารามิเตอร์ distanceFromWindow โดยตรงจากพารามิเตอร์ การเปลี่ยนหน้าต่างเป็นค่าออฟเซ็ตที่ RecyclerListView โดยรวมถูกแทนที่ภายใน stickyContainer ให้ใช้พารามิเตอร์นี้เพื่อระบุว่ารายการรายการแรกนั้นอยู่ไกลแค่ไหนจากด้านบนหน้าต่าง ค่านี้แก้ไขการเลื่อนสกรอลสำหรับ stickyObjects เช่นเดียวกับ RecyclerListViewstartCorrection - StartCorrection ใช้เพื่อระบุการเปลี่ยนแปลงในหน้าต่างที่มองเห็นได้ด้านบนซึ่งผู้ใช้สามารถรับอินสแตนซ์ส่วนหัวเหนียวที่ถูกต้องได้แม้ว่าปัจจัยภายนอกเช่นแถบเครื่องมือ CoordInatorLayoutendCorrection - endcorrection ใช้เพื่อระบุการเปลี่ยนแปลงในหน้าต่างที่มองเห็นได้ด้านล่างซึ่งผู้ใช้สามารถได้รับอินสแตนซ์ส่วนท้ายแบบเหนียวที่ถูกต้องเมื่อปัจจัยภายนอกเช่นแถบแอพด้านล่างกำลังเปลี่ยนมุมมองที่มองเห็นได้ดังที่เห็นในตัวอย่างด้านล่าง
TypeScript ทำงานนอกกรอบ การดำเนินการเพียงอย่างเดียวคือด้วยอุปกรณ์ประกอบฉาก ScrollView ที่สืบทอดมา เพื่อให้ TypeScript ทำงานกับอุปกรณ์ประกอบฉาก ScrollView ที่สืบทอดมาคุณต้องวางอุปกรณ์ประกอบฉาก ScrollView ที่สืบทอดมาภายในเสา ScrollViewProps
< RecyclerListView
rowRenderer = { this . rowRenderer }
dataProvider = { queue }
layoutProvider = { this . layoutProvider }
onScroll = { this . checkRefetch }
renderFooter = { this . renderFooter }
scrollViewProps = { {
refreshControl : (
< RefreshControl
refreshing = { loading }
onRefresh = { async ( ) => {
this . setState ( { loading : true } ) ;
analytics . logEvent ( 'Event_Stagg_pull_to_refresh' ) ;
await refetchQueue ( ) ;
this . setState ( { loading : false } ) ;
} }
/>
)
} }
/> recyclerlistview/web เช่น import { RecyclerListView } from "recyclerlistview/web" ใช้นามแฝงหากคุณต้องการรักษาเส้นทางนำเข้า เฉพาะรหัสเฉพาะแพลตฟอร์มเป็นส่วนหนึ่งของการสร้างดังนั้นไม่มีรหัสที่ไม่จำเป็นจะจัดส่งพร้อมแอปของคุณrequestAnimationFrame , ResizeObserver Apache v2.0
กรุณาเปิดปัญหาสำหรับข้อบกพร่องใด ๆ ที่คุณพบ คุณสามารถติดต่อฉันได้ที่ Twitter @naqvitalha หรือเขียนถึง [email protected] สำหรับคำถามใด ๆ ที่คุณอาจมี
