react native complete flatlist

React-native-complete-flatlist

extendedバージョンの拡張バージョンのネイティブフラットリストは、検索、プルへのプル、更新、空の行のデータなしなど、多くの構築された機能を備えています。

注意：

renderItem Props return item and indexパラメーターitemパラメーターはitem配列の単一の要素を返します。ただし、検索テキストが空でない場合、Dan highlightColorプロップが任意の色に設定されている場合、 itemパラメーターはJSONオブジェクトの新しい構造を返します（JSXで強調表示されたテキストをレンダリングするため）。これはあなたの論理を破るかもしれません。したがって、データの元の構造にアクセスしたい場合は、 item.cleanDataの下にあります。 highlightColor Propsと検索Textfieldが空でない場合にのみ、 item.cleanDataが存在することを忘れないでください（ユーザーは検索しています）

使用法 ：

 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場合、ユーザースクロールの場合、リストはリル少し拡張され、ユーザーがドラッグを停止すると、リストは元のサイズに戻ります（iPhoneスタイルのimessage）	間違い	オプション
slide	弦	アニメーションすべてのアイテムがリストに入る方法。 「なし」、「左」または「右」にすることができます	none	オプション
data	オブジェクトの配列	リストに表示されるデータ	[]	必須（さあ、もちろんあなたはこれにデータが必要です）
backgroundStyles	スタイルオブジェクト	フラットリストの背景のスタイル	ヌル	オプション
searchBarBackgroundStyles	スタイルオブジェクト	SearchBarの背景のスタイル	ヌル	オプション
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	色	一致する検索キーワードのとき、ヒグライトされた単語の背景。 readmeの上にこの小道具を使用している場合は、事前に注意してください	黄色	オプション
searchKey	文字列の配列	これは、検索に使用されるデータで利用可能なキーの名前である必要があります。この小道具が提供されていない場合、検索テキスト入力はレンダリングされません。 **Warning: nested key not yet supported	[]	オプション（提供されていない場合、検索フィールドは表示されません）
elementBetweenSearchAndList	JSX要素	SearchBarとリストの間にレンダリングするもの	ヌル	オプション
refreshOnLoad	ブール	trueなら、 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()

方法	説明
ClearSearch	プログラムで検索入力をクリアします