องค์ประกอบ FlatList คืออะไรและใช้งานอย่างไรใน React Native?

FlatList เป็นคอนเทนเนอร์ที่ใช้โหลดรายการ รองรับส่วนหัวและส่วนท้าย รองรับหลายคอลัมน์ พร้อมการเลื่อนแนวตั้ง/แนวนอน การโหลดแบบ Lazy Loading ฯลฯ

นี่คือคุณสมบัติที่สำคัญบางประการของ FlatList -

• มาพร้อมการโหลดแบบเลื่อน
• สามารถปรับการเลื่อนได้โดยใช้การรองรับ ScrolltoIndex
• มาพร้อมกับการสนับสนุนส่วนหัวและส่วนท้าย
• รองรับหลายคอลัมน์
• ข้ามแพลตฟอร์ม
• เรียกกลับความสามารถในการแสดงตัวโฆษณาที่กำหนดค่าได้

โครงสร้างพื้นฐานของ FlatList มีดังนี้ -

 item.id} />

FlatList ถูกใช้งานจากองค์ประกอบ VirtualizedList ที่ดูแลแสดงรายการจำนวนจำกัดที่จะพอดีกับพอร์ตมุมมองปัจจุบันของหน้าจอมือถือของคุณ ข้อมูลที่เหลือจะแสดงเมื่อผู้ใช้เลื่อน อุปกรณ์พื้นฐาน เช่น data และ renderItem สามารถใช้สร้าง FlatList ได้

ในการทำงานกับ FlatList คุณต้องนำเข้าจาก react-native ดังนี้ -

นำเข้า { FlatList} จาก "react-native";

คุณสมบัติที่สำคัญบางอย่างของ FlatList อยู่ด้านล่าง -

separators.highlight(),separators.unhighlight(),separators.updateProps()

ตัวอย่างที่ 1:แสดงรายการใน FlatList ในแนวตั้ง

ตัวอย่างแสดงการทำงานของ FlatList ในการทำงานกับ FlatList ให้นำเข้าส่วนประกอบก่อน -

นำเข้า { FlatList , Text, View, StyleSheet } จาก "react-native";

ฉันต้องการ FlatList เช่นกันกับส่วนประกอบอื่นๆ เช่น Text, View, StyleSheet เป็นต้น ส่วนประกอบเดียวกันนี้ถูกนำเข้าตามที่แสดงด้านบน

เมื่อนำเข้าเสร็จแล้ว ฉันต้องการข้อมูลที่จะแสดงใน FlatList ข้อมูลถูกเก็บไว้ใน this.state.data ดังแสดงด้านล่าง -

this.state ={ ข้อมูล:[ { ชื่อ:"Javascript Frameworks", isTitle:true }, { ชื่อ:"Angular", isTitle:false }, { ชื่อ:"ReactJS", isTitle:false }, { ชื่อ :"VueJS", isTitle:false }, { ชื่อ:"ReactNative", isTitle:false }, { ชื่อ:"PHP Frameworks", isTitle:true }, { ชื่อ:"Laravel", isTitle:false }, { ชื่อ:"CodeIgniter", isTitle:false }, { ชื่อ:"CakePHP", isTitle:false }, { ชื่อ:"Symfony", isTitle:false } ], stickyHeaderIndices:[]};

การใช้งานฟังก์ชันสำหรับ renderItem

ฟังก์ชันด้านล่างดูแลรายการและแสดงเหมือนกันในองค์ประกอบข้อความดังที่แสดงด้านล่าง -

renderItem =({ item }) => { return (  {item.name}  );};

องค์ประกอบข้อความถูกห่อภายในองค์ประกอบการดู item.isTitle เป็นตัวแปรที่ถูกตรวจสอบว่าเป็นจริง/เท็จหรือไม่ และด้วยเหตุนี้ จึงต้องกำหนดให้เป็นตัวหนา รวมทั้งกำหนดสีให้กับตัวแปรนั้นด้วย

การใช้งาน FlatList

นี่คือการใช้งาน FlatList ที่มี data และ renderItem props

  item.name} />

this.state.data ให้กับ ข้อมูล อุปกรณ์ประกอบฉากและ this.renderItem ฟังก์ชั่นถูกกำหนดให้กับ renderItem อุปกรณ์ประกอบฉาก

จากข้อมูลของคุณ คุณสามารถบอกคุณสมบัติคีย์ที่จะเป็นคุณสมบัติเฉพาะจากอาร์เรย์ข้อมูล และควรมอบคุณสมบัติเดียวกันนี้ให้กับอุปกรณ์ประกอบฉาก keyExtractor หากไม่ระบุ จะถือว่าดัชนีอาร์เรย์เป็นคีย์ ค่า.

ดังนั้นเราจึงถือว่าชื่อนี้เป็นคีย์เฉพาะและชื่อนั้นถูกกำหนดให้กับ keyExtractor

keyExtractor={item => item.name}

นี่คือโค้ดแบบเต็มที่ใช้ FlatList

นำเข้า React จาก "react" นำเข้า { FlatList , Text, View, StyleSheet, StatusBar } จาก "react-native"; ส่งออกแอปคลาสเริ่มต้นขยาย React.Component { constructor () { super (); this.state ={ ข้อมูล:[ { ชื่อ:"Javascript Frameworks", isTitle:true }, { ชื่อ:"Angular", isTitle:false }, { ชื่อ:"ReactJS", isTitle:false }, { ชื่อ:"VueJS ", isTitle:false }, { ชื่อ:"ReactNative", isTitle:false }, { ชื่อ:"PHP Frameworks", isTitle:true }, { ชื่อ:"Laravel", isTitle:false }, { ชื่อ:"CodeIgniter" , isTitle:false }, { ชื่อ:"CakePHP", isTitle:false }, { ชื่อ:"Symfony", isTitle:false } ], stickyHeaderIndices:[] }; } renderItem =({ item }) => {return ({item.name});};render() { return ( item.name} stickyHeaderIndices={this.state.stickyHeaderIndices} />); }} รูปแบบ const =StyleSheet.create ({ คอนเทนเนอร์:{ flex:1, marginTop:StatusBar.currentHeight || 0, } รายการ:{ ระยะขอบ:10 ช่องว่างภายใน:20 ระยะขอบแนวตั้ง:8 ระยะขอบแนวนอน:16 }});

ผลลัพธ์

ตัวอย่างที่ 2:การแสดงรายการใน FlatList ในแนวนอน

ในการแสดงรายการ FlatList ในแนวนอน คุณเพียงแค่เพิ่ม props horizontal={true} ไปยังองค์ประกอบ FlatList ของคุณ

นำเข้า React จาก "react" นำเข้า { FlatList , Text, View, StyleSheet, StatusBar } จาก "react-native"; ส่งออกแอปคลาสเริ่มต้นขยาย React.Component { constructor () { super (); this.state ={ ข้อมูล:[ { ชื่อ:"Javascript Frameworks", isTitle:true }, { ชื่อ:"Angular", isTitle:false }, { ชื่อ:"ReactJS", isTitle:false }, { ชื่อ:"VueJS ", isTitle:false }, { ชื่อ:"ReactNative", isTitle:false }, { ชื่อ:"PHP Frameworks", isTitle:true }, { ชื่อ:"Laravel", isTitle:false }, { ชื่อ:"CodeIgniter" , isTitle:false }, { ชื่อ:"CakePHP", isTitle:false }, { ชื่อ:"Symfony", isTitle:false } ], stickyHeaderIndices:[] }; } renderItem =({ item }) => {return ({item.name});}; render() { return (<ดู style={styles.container}> item.name} stickyHeaderIndices ={this.state.stickyHeaderIndices} />); }}const styles =StyleSheet.create ({ คอนเทนเนอร์:{ flex:1, marginTop:100, } รายการ:{ flexDirection:'row', justifyContent:'space-between', alignItems:'center', padding:30, ระยะขอบ:2, borderColor:'#2a4944', borderWidth:1, ความสูง:100, backgroundColor:'#d2f7f1' }});

ผลลัพธ์