ネイティブのフラットリストリアルワールドユースケース

モバイルアプリケーションの75 %のリストとフォームで行われます.
はい、私はその75 %を構成しただけでは、Facebook、YouTube、Instagram、Safari、Chrome、WhatsAppのような日常を使用しているアプリについて考える.そして、あなたは同意するかもしれません.
だからリストを実装する方法マスターマスターモバイルアプリケーションの37.5 %のようです.
このチュートリアルではFlatlist - 実世界のユースケースでは、ネイティブのコンポーネントを組み込みます.我々はプル＆リフレッシュロード＆スクロール(またはロードロード)について話している.

基本

Skip this section if you've already used Flatlist before.

Flatlist 使い方はかなり簡単です.

const DATA = [{title: 'Item 1'}, {title: 'Item 2'}, {title: 'Item 3'}];

function Item({ title }) {
  return (
    <View>
      <Text>{title}</Text>
    </View>
  );
}

<FlatList data={DATA} renderItem={({item}) => <Item title={item.title} />} />;

必須の2つの小道具があります.

data : 項目のデータを含む配列

renderItem : 関数は、data array return 1 i反応するコンポーネントを返します.

リフレッシュする

あなたは毎日、自分のFacebookやInstagramフィードでこの機能を使用することがあります.ユーザーは自分のリストに最新のコンテンツを読み込むためにプルダウンすることができます.

以下に簡単な実装を示します:

const RefreshableFeed = () => {
  const [items, setItems] = useState([]);
  const [refreshing, setRefreshing] = useState(false);
  const fetchItems = useCallback(async () => {
    if (refreshing) return;
    setRefreshing(true);
    const newItems = await apiCallToGetItems();
    setItems(newItems.concat(items));
    setRefreshing(false);
  }, [refreshing]);

  return (
    <FlatList
      onRefresh={fetchItems}
      refreshing={refreshing}
      data={items}
      renderItem={({ item }) => <Text>{item}</Text>}
    />
  );
};

FlatList 既に2つの小道具を提供します.

onRefresh : ユーザーがプルダウンするときに呼び出される関数.

refreshing : 新しいデータを取得するかどうかを示すBoolean.

そのように簡単に、機能を更新するプルを実装しました.詳細については、FlatListのを使用することができますrefreshControl とともに進むRefreshControl component .

無限荷重

Twitterでは、一度にすべての新しいつぶやきを読み込むのではなく、それだけでロードされ、それらのいくつかを示して、ほとんどの場合は、最後にスクロールすると、それは負荷をより多くの負荷と無限にスクロールを終了する最後に新たにロードされたつぶやきを追加します.

もう一度簡単な実装を行います.

const InfiniteFeed = () => {
  const [loading, setLoading] = useState(false);
  const [items, setItems] = useState([]);
  const loadMoreItems = useCallback(async () => {
    if (loading) return;
    setLoading(true);
    const newItems = await apiCallToLoadMoreItems();
    setItems(items.concat(newItems));
    setLoading(false);
  }, [loading]);

  return (
    <FlatList
      onEndReached={loadMoreItems}
      data={items}
      renderItem={({ item }) => <Text>{item}</Text>}
    />
  );
};

私たちはこの機能を実装するために1プロップだけを必要とし、それは非常に直感的です

onEndReached : リストの最後に到達するときに呼び出される関数.

また、上記の関数をトリガするときに onEndReachedThreshold プロップ
ローディングインジケータを表示する場合は、以下のように追加します.

//...
  return (
    <FlatList
      ListFooterComponent={() => {
        if (!loading) return null;
        return <ActivityIndicator />;
      }}
    />
  );

結論

あなたは今、リストの2最も重要な機能を実装する方法を知っている.余分なライブラリや複雑なコードを使用せずに.
しかし、これらの例が新しい/リフレッシュされたデータを扱うことに集中しないことに留意してください.APIによっては、ページ化、チェックの重複をチェックする必要があります.あなたのリストのアイテムを更新するとき.

リファレンス

https://reactnative.dev/docs/flatlist
https://reactnative.dev/docs/activityindicator
https://reactnative.dev/docs/refreshcontrol
https://reactjs.org/docs/hooks-reference.html#usestate
https://reactjs.org/docs/hooks-reference.html#usecallback