react native complete flatlist

القائمة المتفانية-القائمة الإضافية

الإصدار الممتد من قائمة React Native Flat مع العديد من الوظائف المدمجة مثل البحث ، سحب إلى تحديث ، لا توجد رسالة متاحة للبيانات إذا كان صف فارغ

حذر:

renderItem Props Return item and index Parameters Edem Tower Treate Element in in item item . ولكن إذا لم يكن نص البحث فارغًا ، فقد تم تعيين الدعائم 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}) => {} } (مماثل مثل ON في القائمة المسطحة الأصلية)

ملكيات

يجب أن تعمل جميع الدعائم المسطحة بالإضافة إلى الدعائم المذكورة أدناه

دعم	يكتب	وصف	تقصير	مطلوب
showSearch	منطقية	إذا تم تحديد true (و searchKey Prop) ، فسيتم عرض شريط البحث.	حقيقي	خياري
isJelly	منطقية	إذا كان true ، عند التمرير للمستخدم ، ستوسع القائمة بتات LIL ، وعندما توقف المستخدم ، ستعود القائمة إلى الحجم الأصلي (iMessage على نمط iPhone)	خطأ شنيع	خياري
slide	خيط	الرسوم المتحركة كيف تأتي كل عناصر في القائمة. يمكن أن يكون "لا شيء" أو "يسار" أو "يمين"	none	خياري
data	مجموعة من الأشياء	يجب تقديم البيانات في القائمة	[]	مطلوب (تعال ، Ofcourse u تحتاج إلى بيانات لهذا)
backgroundStyles	كائن نمط	نمط خلفية القائمة المسطحة	باطل	خياري
searchBarBackgroundStyles	كائن نمط	نمط خلفية شريط البحث	باطل	خياري
pullToRefreshCallback	وظيفة	وظيفة رد الاتصال عند سحب المستخدم لتحديث	باطل	اختياري (لن يكون السحب إلى التحديث متاحًا إذا لم يتم توفير هذا
isLoading	منطقية	إذا كان هذا صحيحًا ، فسيتم عرض التحميل أعلى القائمة.	خطأ شنيع	خياري
renderItem	الوظيفة التي تُرجع عنصر JSX (تمامًا مثل عرض RN's ListView و Flatlist)	قالب صف في القائمة المسطحة	NULL (مفتوح للعلاقات العامة إذا كان أي شخص يرغب في إنشاء قالب افتراضي لهذا)	مطلوب (لأنني لا أفعل قالبًا افتراضيًا حتى الآن)
renderSeparator	الوظيفة التي تُرجع عنصر JSX ليتم تقديمه بين الصفوف (تمامًا مثل ListView's RN و Flatile))	قالب فاصل في القائمة المسطحة	() => <View style={{ height: 1, width: "80%", alignSelf: "center", backgroundColor: "#f2f2f2" }} />	خياري
placeholder	خيط	العنصر النائب لحقل البحث	"يبحث ..."	خياري
searchTextInputStyle	كائن (نمط لمكون TextInput الخاص بـ React Native)	نمط مجال البحث	باطل	خياري
highlightColor	لون	لون خلفية الكلمات المضيئة عند تطابق الكلمة الرئيسية للبحث. يرجى قراءة الحذر المسبق في حالة استخدام هذا الدعامة أعلى القراءة	أصفر	خياري
searchKey	مجموعة من السلسلة	يجب أن يكون هذا اسم المفاتيح المتاحة في البيانات التي سيتم استخدامها للبحث. إذا لم يتم توفير هذا الدعامة ، فلن يتم تقديم إدخال نص البحث. **Warning: nested key not yet supported	[]	اختياري (إذا لم يتم توفيره ، فلن يظهر حقل البحث)
elementBetweenSearchAndList	عنصر JSX	ما الذي يجب تقديمه بين SearchBar والقائمة	باطل	خياري
refreshOnLoad	منطقية	إذا كان true ، فسيتم استدعاء pullToRefreshCallback إذا كان ذلك متاحًا	حقيقي	خياري
onSearch	الوظيفة التي ستحل محل pullToRefreshCallback	إذا كان موجودًا ، فسيتم تجاوز pullToRefreshCallback . لن يتم تشغيل هذا على الصحافة الرئيسية ، ولكن عند الضغط على مفتاح الإرجاع. يتم تقديم هذه الدعائم إذا كان مشغل البحث نتيجة API. إذا كنت تريد فقط البحث المحلي (بحث من الصفيف الحالي) ، فليس هناك حاجة إلى هذه الدعائم. سوف onSearch تلقائيا الحصول على معلمة keyword	() => فارغة	خياري
loadNext	وظيفة	إذا تم تعريفها ، فسيتم استدعاء هذه الوظيفة عند تمرير المستخدم المسطح إلى الأسفل. تتمثل USECASE في استدعاء ترقيم الصفحات التالية في واجهة برمجة التطبيقات الخاصة بك. إذا تم تعريفه ، فسيتم عرض أيقونة التحميل في أسفل القائمة. لإخفاء أيقونة التحميل ، تأكد من عدم تعريف هذا الدعامة	غير محدد	خياري
refreshControlProps	هدف	الدعائم لـ RefreshControl	غير محدد	خياري

طُرق

إذا كان لديك ref للمكون ،

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

أو في المكونات

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

يمكنك استخدام أي طريقة (طرق) أدناه: completeFlatList.current.methodName()

أو في المكونات

this.completeFlatList.methodName()

طريقة	وصف
ClearSearch	مسح إدخال البحث برمجيا