หน้าแรก>การเขียนโปรแกรมที่เกี่ยวข้อง>ซอร์สโค้ดอื่น ๆ
ดาวน์โหลด

Reaction-native-flatlist

รายการ React Native Flat เวอร์ชันขยายที่มีฟังก์ชั่นในตัวมากมายเช่นการค้นหาดึงไปรีเฟรชไม่มีข้อมูลที่มีอยู่

EZGIF-3-734272A58F

คำเตือน:

พารามิเตอร์ item renderItem Props return และ index พารามิเตอร์ item ส่งคืนองค์ประกอบเดียวในอาร์เรย์ item แต่ถ้าข้อความค้นหาไม่ว่างเปล่า Dan highlightColor อุปกรณ์ประกอบฉากถูกตั้งค่าเป็นสีใด ๆ พารามิเตอร์ item จะส่งคืนโครงสร้างใหม่ของวัตถุ JSON (เพื่อแสดงข้อความที่ไฮไลต์ใน JSX) สิ่งนี้อาจทำลายตรรกะของคุณ ดังนั้นหากคุณต้องการเข้าถึงโครงสร้างดั้งเดิมของข้อมูลของคุณมันจะอยู่ภายใต้ item.cleanData โปรดจำไว้ว่า item.cleanData จะมีอยู่เฉพาะในกรณีที่ highlightColor Props และ Search textfield ไม่ว่างเปล่า (ผู้ใช้กำลังค้นหา)

การใช้งาน: 

 import React, {useRef} from 'react';
import { Text, SafeAreaView, TouchableOpacity } from 'react-native';
import CompleteFlatList from 'react-native-complete-flatlist';

const list = [
  { name: 'Fattah', status: 'Active', time: '8:10 PM', date: '1 Jan 2018' },
  { name: 'Syah', status: 'Active', time: '9:14 PM', date: '1 Dec 2018' },
  { name: 'Izzat', status: 'Active', time: '8:15 PM', date: '1 Jan 2018' },
  { name: 'Ali', status: 'Active', time: '8:10 PM', date: '1 Jan 2018' },
  { name: 'Abu', status: 'Active', time: '8:11 PM', date: '1 Jan 2018' },
  { name: 'Fitri', status: 'Active', time: '8:20 PM', date: '1 Jan 2018' },
  { name: 'Armi', status: 'Active', time: '8:33 PM', date: '1 Jan 2018' },
  { name: 'Eidit', status: 'Active', time: '9:10 PM', date: '1 Jan 2018' },
  { name: 'Hamdan', status: 'Active', time: '10:10 PM', date: '1 Jan 2018' },
  {
    name: 'Muhyiddeen',
    status: 'Blocked',
    time: '10:10 PM',
    date: '9 Feb 2018',
  },
];

const App = () => {
  const ref = useRef();
  const renderItem = ({item, index}) => {
    const data = item.cleanData ? item.cleanData : item;

    console.log('item (if search bar is not empty and prop highlightColor is not empty, item will contains extra data to enable highlight feature)', item);
    console.log('cleanData (if search bar is not empty and prop highlightColor is not empty, cleanData will contain original data structure without extra data)', item.cleanData);


    console.log('this is index number : ' + index);

    console.log(data + ' this is original data');

    return <Text>{item.name}</Text>;
  };

  return (
    <SafeAreaView style={{ flex: 1 }}>
      <CompleteFlatList
        searchKey={['name', 'status', 'time', 'date']}
        pullToRefreshCallback={() => console.log('refreshing')}
        data={list}
        // renderSeparator={null}
        ref={ref}
        highlightColor="yellow"
        renderItem={renderItem}
      />
      <TouchableOpacity onPress={() => ref.current.clearSearch()} style={{ padding: 5 }}>
        <Text>Clear Search</Text>
      </TouchableOpacity>
    </SafeAreaView>
  );
};

export default App;

การอัพเกรดจาก V 1.xx เป็น V 2.xx

เปลี่ยนจาก renderItem={(data, index) => {} } เป็น renderItem={({item, index, separators}) => {} } (คล้ายกับใน Flatlist ดั้งเดิม)

คุณสมบัติ

อุปกรณ์ประกอบฉากแฟลตทั้งหมดควรทำงานพร้อมอุปกรณ์ประกอบฉากที่กล่าวถึงด้านล่าง

ข้อต่อ พิมพ์ คำอธิบาย ค่าเริ่มต้น ที่จำเป็น
showSearch บูลีน หากมีการกำหนด true (และ searchKey Prop) แถบค้นหาจะปรากฏขึ้น จริง ไม่จำเป็น
isJelly บูลีน หาก true เมื่อผู้ใช้เลื่อนรายการจะขยายบิต lil และเมื่อผู้ใช้หยุดลากรายการจะกลับมาเป็นขนาดดั้งเดิม (iMessage บนสไตล์ iPhone) เท็จ ไม่จำเป็น
slide สาย ภาพเคลื่อนไหวว่าทุกรายการเข้ามาในรายการได้อย่างไร สามารถเป็น "ไม่มี", "ซ้าย" หรือ "ขวา" none ไม่จำเป็น
data อาร์เรย์ของวัตถุ ข้อมูลที่จะแสดงผลในรายการ - จำเป็น (มาเลยแน่นอนว่าคุณต้องการข้อมูลสำหรับสิ่งนี้)
backgroundStyles วัตถุสไตล์ สไตล์ของพื้นหลังลิสต์ โมฆะ ไม่จำเป็น
searchBarBackgroundStyles วัตถุสไตล์ รูปแบบของพื้นหลังแถบค้นหา โมฆะ ไม่จำเป็น
pullToRefreshCallback การทำงาน ฟังก์ชั่นการโทรกลับเมื่อผู้ใช้ดึงไปรีเฟรช โมฆะ เป็นทางเลือก (pull to Refresh จะไม่สามารถใช้งานได้หากไม่ได้ให้มา
isLoading บูลีน หากเป็นจริงการโหลดจะแสดงที่ด้านบนของรายการ เท็จ ไม่จำเป็น
renderItem ฟังก์ชั่นที่ส่งคืนองค์ประกอบ JSX (เช่นเดียวกับ ListView และ Flatlist ของ RN) เทมเพลตของแถวในรายการแบน NULL (เปิดสำหรับ PR หากใครต้องการสร้างเทมเพลตเริ่มต้นสำหรับสิ่งนี้) จำเป็น (เนื่องจากฉันยังไม่ได้ทำเทมเพลตเริ่มต้น)
renderSeparator ฟังก์ชั่นที่ส่งคืนองค์ประกอบ JSX ที่จะแสดงผลระหว่างแถว (เช่น ListView ของ RN และ Flatlist) เทมเพลตของตัวคั่นในรายการแบน () => <View style={{ height: 1, width: "80%", alignSelf: "center", backgroundColor: "#f2f2f2" }} /> ไม่จำเป็น
placeholder สาย ตัวยึดตำแหน่งของฟิลด์ค้นหา "ค้นหา ..." ไม่จำเป็น
searchTextInputStyle วัตถุ (สไตล์สำหรับส่วนประกอบ textInput ของ React Native) สไตล์สำหรับฟิลด์ค้นหา โมฆะ ไม่จำเป็น
highlightColor สี สีพื้นหลังคำที่ higlighted เมื่อจับคู่คำค้นหา โปรดอ่านข้อควรระวังล่วงหน้าหากใช้เสานี้ที่ด้านบนของ readme สีเหลือง ไม่จำเป็น
searchKey อาร์เรย์ของสตริง นี่ควรเป็นชื่อของคีย์ที่มีอยู่ในข้อมูลซึ่งจะใช้ในการค้นหา หากไม่ได้ให้เสานี้การป้อนข้อความการค้นหาจะไม่แสดงผล **Warning: nested key not yet supported - เป็นทางเลือก (หากไม่ได้ให้มาให้ฟิลด์ค้นหาจะไม่ปรากฏขึ้น)
elementBetweenSearchAndList องค์ประกอบ JSX สิ่งที่จะแสดงระหว่าง Searchbar และรายการ โมฆะ ไม่จำเป็น
refreshOnLoad บูลีน หาก true Prop pullToRefreshCallback จะถูกเรียกถ้ามีอยู่ จริง ไม่จำเป็น
onSearch ฟังก์ชั่นที่จะแทนที่ pullToRefreshCallback หากมีอยู่ pullToRefreshCallback จะถูกแทนที่ สิ่งนี้จะไม่ทริกเกอร์ในการกดปุ่ม แต่เมื่อกดปุ่ม Return อุปกรณ์ประกอบฉากนี้จะถูกนำมาใช้หากทริกเกอร์การค้นหาเป็นผลมาจาก API หากคุณต้องการการค้นหาในท้องถิ่น (ค้นหาจากอาร์เรย์ที่มีอยู่) ไม่จำเป็นต้องใช้อุปกรณ์ประกอบฉากนี้ onSearch จะรับพารามิเตอร์ keyword โดยอัตโนมัติ () => null ไม่จำเป็น
loadNext การทำงาน หากกำหนดฟังก์ชั่นนี้จะถูกเรียกเมื่อผู้ใช้เลื่อนลิสต์แฟลตไปที่ด้านล่าง USECASE คือการโทรหา API ของคุณต่อไป หากกำหนดไอคอนการโหลดจะแสดงที่ด้านล่างของรายการ ในการซ่อนไอคอนการโหลดตรวจสอบให้แน่ใจว่าเสานี้ไม่ได้กำหนดไว้ ไม่ได้กำหนด ไม่จำเป็น
refreshControlProps วัตถุ อุปกรณ์ประกอบฉากสำหรับ RefreshControl ไม่ได้กำหนด ไม่จำเป็น

วิธีการ

หากคุณมี ref ถึงส่วนประกอบ 

 const completeFlatList = useRef();
...
 <CompleteFlatList
   ...
    ref={completeFlatList}
   ...
 />

หรือตามองค์ประกอบ 


<CompleteFlatList
   ...
   ref={c => this.completeFlatList = c}
   ...
/>

คุณสามารถใช้วิธีการใด ๆ ด้านล่าง: completeFlatList.current.methodName()

หรือตามองค์ประกอบ

this.completeFlatList.methodName()

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