react native complete flatlist

反應原始純素素

React本機平面列表的擴展版本具有許多內置功能，例如搜索，拉刷新，如果空行，則無數據可用消息

警告：

renderItem Props返回item和index參數item參數返回item數組中的一個元素。但是，如果搜索文本不是空的dan highlightColor道具設置為任何顏色， item參數將返回JSON對象的新結構（以在JSX中呈現突出顯示的文本）。這可能會打破您的邏輯。因此，如果要訪問數據的原始結構，它將在item.cleanData下進行。請記住， item.cleanData僅在highlightColor彩色道具和搜索文本字段不是空的時就存在（用戶正在搜索）

用法 ：

 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中的on）

特性

所有Flatlist道具都應起作用以及下面提到的道具

支柱	類型	描述	預設	必需的
showSearch	布爾	如果true （定義了searchKey Prop），將顯示搜索欄。	真的	選修的
isJelly	布爾	如果為true ，當用戶滾動時，列表將擴展一個小點，當用戶停止拖動時，列表將返回到原始大小（iMessage on iPhone樣式）	錯誤的	選修的
slide	細繩	動畫如何進入列表。可以是“無”，“左”或“右”	none	選修的
data	對像數組	列表中要渲染的數據	[]	需要（來吧，當然您需要數據）
backgroundStyles	樣式對象	平面列表背景的風格	無效的	選修的
searchBarBackgroundStyles	樣式對象	搜索欄背景的樣式	無效的	選修的
pullToRefreshCallback	功能	當用戶拉刷新時回調功能	無效的	可選（如果不提供，則將不可用
isLoading	布爾	如果為true，則加載將顯示在列表的頂部。	錯誤的	選修的
renderItem	返回JSX元素的函數（就像RN的ListView和Flatlist一樣）	平面列表中的一排模板	null（如果有人想為此製作默認模板，則為PR開放）	需要（因為我還沒有默認模板）
renderSeparator	返回將在行之間呈現的JSX元素的函數（就像RN的ListView和Flatlist一樣）	平面列表中的分離器模板	() => <View style={{ height: 1, width: "80%", alignSelf: "center", backgroundColor: "#f2f2f2" }} />	選修的
placeholder	細繩	搜索場的佔位符	"搜尋 ..."	選修的
searchTextInputStyle	對象（React Native的TextInput組件的樣式）	搜索字段的樣式	無效的	選修的
highlightColor	顏色	匹配搜索關鍵字時，higlight詞的顏色背景。如果使用此道具，請閱讀謹慎的謹慎	黃色的	選修的
searchKey	字符串數組	這應該是數據中可用於搜索的密鑰的名稱。如果未提供此道具，則不會渲染搜索文本輸入。 **Warning: nested key not yet supported	[]	可選（如果不提供，則不會出現搜索字段）
elementBetweenSearchAndList	JSX元素	在搜索欄和列表之間渲染什麼	無效的	選修的
refreshOnLoad	布爾	pullToRefreshCallback true ，如果可用	真的	選修的
onSearch	可以替換pullToRefreshCallback功能	如果存在，則將撤回pullToRefreshCallback 。這不會在按鍵按下觸發，而是按下返回鍵。如果搜索觸發器由API產生，則將引入此道具。如果您只想本地搜索（從現有數組中搜索），則不需要此道具。 onSearch將自動獲取keyword參數	（）=> null	選修的
loadNext	功能	如果定義，當用戶滾動flatlist到底部時，將調用此功能。用戶酶是調用您的API的下一個分頁。如果定義，將顯示加載圖標在列表的底部。要隱藏加載圖標，請確保此道具未定義	不明確的	選修的
refreshControlProps	目的	刷新控制的道具	不明確的	選修的

方法

如果您對組件有ref ，

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

或基於組件的

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

您可以使用下面的任何方法： completeFlatList.current.methodName()

或基於組件的

this.completeFlatList.methodName()

方法	描述
ClearSearch	以編程方式清除搜索輸入