หน้าแรก>แหล่งข้อมูลการสร้างเว็บไซต์>ข้อมูลเว็บไซต์
ดาวน์โหลด
ตอบสนองรายการใหญ่พื้นเมือง

หากโครงการนี้ช่วยคุณได้โปรดสนับสนุนเราด้วยดาว?


เอกสาร

คำอธิบาย

นี่คืออะไร?

นี่คือมุมมองรายการประสิทธิภาพสูงสำหรับ React Native โดยรองรับเลย์เอาต์ที่ซับซ้อนโดยใช้การใช้งาน Flatlist ที่คล้ายกันเพื่อให้ง่ายต่อการเปลี่ยน การใช้งานรายการนี้สำหรับการแสดงรายการรายชื่อขนาดใหญ่ใน React Native Works กับ Recycler ที่มุ่งเน้นไปที่ประสิทธิภาพและการใช้งานหน่วยความจำดังนั้นจึงอนุญาตให้ประมวลผลรายการหลายพันรายการในรายการ

นอกจากนี้คุณยังสามารถลองได้ในเว็บแอปที่เผยแพร่: Demo

ทำไมต้องเป็นไลบรารีรายการอื่น?

Flatlist ของ React Native นั้นยอดเยี่ยม แต่เมื่อพูดถึงรายการใหญ่มันมีข้อบกพร่องบางอย่างเนื่องจากการแคชรายการ มีทางเลือกบางอย่างเช่น react-native-largelist และ recyclerlistview แต่ทั้งคู่มีปัญหาบางอย่าง

react-native-largelist ไม่เข้ากันได้กับเว็บและงานแสดงสินค้ามีรหัสดั้งเดิมที่บางครั้งต้องมีการปรับและบำรุงรักษามีการรีไซเคิลรายการแปลก ๆ (เนื่องจากไม่เคยมีรายการว่าง) ต้องปรับโครงสร้างข้อมูลและมีปัญหาบางอย่างเมื่อพยายามประมวลผลข้อมูลจำนวนมาก (เช่น: 100,000 รายการ)

recyclerlistview เป็นนักแสดง แต่ทนทุกข์ทรมานจากเฟรมที่ว่างเปล่าบนเมาท์ตำแหน่งม้วนแปลก ๆ เมื่อพยายามเลื่อนไปที่องค์ประกอบบนเมานต์และการใช้งานส่วนหัวที่เหนียวเหนอะหนะกับ Animated

มันทำงานอย่างไร?

Recycler ทำให้ง่ายต่อการแสดงชุดข้อมูลขนาดใหญ่อย่างมีประสิทธิภาพ คุณให้ข้อมูลและกำหนดวิธีการดูแต่ละรายการและไลบรารี Recycler สร้างองค์ประกอบแบบไดนามิกเมื่อจำเป็น ตามชื่อหมายถึง Recycler รีไซเคิลองค์ประกอบแต่ละตัวเหล่านั้น เมื่อรายการเลื่อนออกจากหน้าจอผู้รีไซเคิลจะไม่ทำลายมุมมอง แต่ Recycler จะนำมุมมองสำหรับรายการใหม่ที่เลื่อนบนหน้าจอ สิ่งนี้จะช่วยปรับปรุงประสิทธิภาพได้อย่างมากมายปรับปรุงการตอบสนองของแอพของคุณและลดการใช้พลังงาน

เมื่อรายการไม่สามารถทำให้รายการของคุณเร็วพอส่วนประกอบที่ไม่แสดงผลจะปรากฏเป็นพื้นที่ว่าง

ไลบรารีนี้เป็นเนทีฟ JS อย่างสมบูรณ์ดังนั้นจึงเข้ากันได้กับแพลตฟอร์มที่มีอยู่ทั้งหมด: Android, iOS, Windows, MacOS, Web และ Expo

ติดตั้ง

ติดตั้งไลบรารีจาก NPM หรือเส้นด้ายเพียงแค่เรียกใช้หนึ่งในบรรทัดคำสั่งต่อไปนี้:

NPM เส้นด้าย
npm install react-native-big-list --save yarn add react-native-big-list

การใช้งาน

อ่านวิธีการโยกย้ายจาก Flatlist

ตัวอย่างพื้นฐาน: 

 import BigList from "react-native-big-list" ;
// ...
const MyExample = ( { data } ) => {
  const renderItem = ( { item , index } ) => < MyListItem item = { item } /> ;
  return < BigList data = { data } renderItem = { renderItem } itemHeight = { 50 } /> ;
} ;

สำหรับตัวอย่างเพิ่มเติมตรวจสอบไดเรกทอรี example ไดเรกทอรี list หรือตรวจสอบเอกสาร

- ภาพหน้าจอ

Biglist vs Flatlist รายการส่วน

⚡ตัวอย่าง

ตัวอย่าง

  • รายการมาตรฐาน
  • รายการคอลัมน์
  • รายการส่วน

งานแสดงสินค้า

โคลนหรือดาวน์โหลด repo และหลังจาก: 

 cd Example
yarn install # or npm install
expo start

เปิดไคลเอนต์ Expo บนอุปกรณ์ของคุณ ใช้เพื่อสแกนรหัส QR ที่พิมพ์โดย expo start คุณอาจต้องรอสักครู่ในขณะที่โครงการของคุณและโหลดเป็นครั้งแรก

นอกจากนี้คุณยังสามารถลองได้ในเว็บแอปที่เผยแพร่: Demo

อุปกรณ์ประกอบฉากและวิธีการ

รายการมีอุปกรณ์ประกอบฉากเดียวกันของ ScrollView นอกเหนือจากอุปกรณ์ประกอบฉากและวิธีการเฉพาะ

- วิธีการมีส่วนร่วม

มีความคิด? พบข้อผิดพลาด? โปรดเพิ่มปัญหาหรือดึงคำขอ ยินดีต้อนรับการมีส่วนร่วมและได้รับการชื่นชมอย่างมาก! ทุกเล็กน้อยช่วยได้และเครดิตจะได้รับเสมอ


ขยาย
ข้อมูลเพิ่มเติม
แอปที่เกี่ยวข้อง
แนะนำสำหรับคุณ
ข้อมูลที่เกี่ยวข้อง ทั้งหมด