react native complete flatlist

react-native-complete-flatlist

Versi Extended dari React Native Flat List dengan banyak fungsi bawaan seperti pencarian, tarik untuk menyegarkan, tidak ada data yang tersedia pesan jika baris kosong

Peringatan:

Props renderItem mengembalikan item dan parameter index parameter item mengembalikan elemen tunggal dalam array item . Tetapi jika teks pencarian tidak kosong dan highlightColor props diatur ke warna apa pun, parameter item akan mengembalikan struktur baru objek JSON (untuk membuat teks yang disorot dalam JSX). Ini mungkin merusak logika Anda. Oleh karena itu, jika Anda ingin mengakses struktur asli data Anda, itu akan berada di bawah item.cleanData . Ingat, item.cleanData hanya ada jika highlightColor sorotan dan pencarian teksfield tidak kosong (pengguna sedang mencari)

Penggunaan :

 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;

Meningkatkan dari V 1.xx ke V 2.xx

Ubah dari renderItem={(data, index) => {} } ke renderItem={({item, index, separators}) => {} } (mirip seperti on in asli flatList)

Properti

Semua alat peraga flatlist harus berfungsi ditambah alat peraga yang disebutkan di bawah ini

Menopang	Jenis	Keterangan	Bawaan	Diperlukan
showSearch	Boolean	Jika true (dan pencarian searchKey didefinisikan), bilah pencarian akan ditampilkan.	BENAR	Opsional
isJelly	Boolean	Jika true , saat gulir pengguna, daftar akan memperluas bit lil, dan ketika pengguna berhenti seret, daftar akan kembali ke ukuran asli (iMessage pada gaya iPhone)	PALSU	Opsional
slide	rangkaian	Animasi Bagaimana setiap item masuk ke dalam daftar. Bisa menjadi "tidak ada", "kiri" atau "kanan"	none	Opsional
data	Array objek	Data yang akan diterjemahkan dalam daftar	[]	Diperlukan (ayolah, tentu saja Anda membutuhkan data untuk ini)
backgroundStyles	objek gaya	Gaya latar belakang daftar datar	batal	Opsional
searchBarBackgroundStyles	objek gaya	Gaya latar belakang pencarian	batal	Opsional
pullToRefreshCallback	fungsi	Fungsi panggilan balik saat pengguna menarik untuk menyegarkan	batal	Opsional (tarik untuk menyegarkan tidak akan tersedia jika ini tidak disediakan
isLoading	Boolean	Jika benar, pemuatan akan ditampilkan di atas daftar.	PALSU	Opsional
renderItem	Fungsi yang Mengembalikan Elemen JSX (Sama seperti RN's ListView dan Flatlist)	Template baris dalam daftar datar	null (buka untuk PR jika ada yang ingin membuat template default untuk ini)	Diperlukan (karena saya belum melakukan template default)
renderSeparator	Fungsi yang Mengembalikan Elemen JSX untuk diterjemahkan di antara baris (seperti RN's ListView dan Flatlist)	Template pemisah dalam daftar datar	() => <View style={{ height: 1, width: "80%", alignSelf: "center", backgroundColor: "#f2f2f2" }} />	Opsional
placeholder	rangkaian	Placeholder bidang pencarian	"Mencari ..."	Opsional
searchTextInputStyle	Objek (Gaya untuk Komponen TextInput Native React)	Gaya untuk Bidang Pencarian	batal	Opsional
highlightColor	warna	Warna latar belakang kata -kata higlight saat mencocokkan kata kunci pencarian. Harap baca pra -peringatan jika menggunakan prop ini di atas readme	kuning	Opsional
searchKey	array string	Ini harus nama kunci yang tersedia dalam data yang akan digunakan untuk mencari. Jika prop ini tidak disediakan, input teks pencarian tidak akan diberikan. **Warning: nested key not yet supported	[]	Opsional (jika tidak disediakan, bidang pencarian tidak akan muncul)
elementBetweenSearchAndList	Elemen JSX	Apa yang harus diterjemahkan antara Searchbar dan daftar	batal	Opsional
refreshOnLoad	Boolean	Jika true , prop pullToRefreshCallback akan dipanggil jika tersedia	BENAR	Opsional
onSearch	fungsi yang akan menggantikan pullToRefreshCallback	Jika ada, pullToRefreshCallback akan ditimbulkan. Ini tidak akan dipicu pada tekan tombol, tetapi pada tombol pengembalian ditekan. Alat peraga ini diperkenalkan jika hasil pencarian pemicu dari API. Jika Anda hanya ingin pencarian lokal (pencarian dari array yang ada), alat peraga ini tidak diperlukan. onSearch akan mendapatkan parameter keyword secara otomatis	() => null	Opsional
loadNext	fungsi	Jika didefinisikan, fungsi ini akan dipanggil ketika pengguna menggulir dataran ke bawah. Usecase adalah menghubungi pagination API Anda berikutnya. Jika didefinisikan, ikon memuat akan ditampilkan di bagian bawah daftar. Untuk menyembunyikan ikon pemuatan, pastikan prop ini tidak ditentukan	belum diartikan	Opsional
refreshControlProps	obyek	Alat peraga untuk RefreshControl	belum diartikan	Opsional

Metode

Jika Anda memiliki ref ke komponen,

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

atau berbasis komponen

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

Anda dapat menggunakan metode apa pun di bawah ini: completeFlatList.current.methodName()

atau berbasis komponen

this.completeFlatList.methodName()

Metode	Keterangan
ClearSearch	Hapus input pencarian secara terprogram