React Native Flatlist 实际应用案例教程

75% 的移动应用程序都是用列表和表单制作的。

是的，那75%是我编的，但想想你每天使用的应用程序，比如Facebook、YouTube、Instagram、Safari、Chrome、WhatsApp……你可能就会同意我的说法了。

所以，掌握列表的实现方法就相当于掌握了移动应用开发的 37.5%。

本教程旨在向您展示如何在实际应用场景中使用Flatlist ——React Native 的内置组件。我们将讨论下拉刷新和无限加载（或滚动加载）。

基本的

如果您之前已经使用过此部分，请跳过此部分Flatlist。

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} />} />;

需要两个道具：

data：一个包含项目数据的普通数组
renderItem：对data数组中的每个元素调用该函数，返回要渲染的 React 组件。

下拉刷新

你可能每天都会在自己的 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：一个布尔值，指示是否正在获取新数据。

就这么简单，你已经实现了下拉刷新功能。如需更多自定义设置，你可以使用 FlatList 的refreshControlprop 以及RefreshControl 组件。

无限加载（滚动加载）

例如，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>}
    />
  );
};

我们只需要一个属性就能实现这个功能，而且非常直观：

onEndReached：当到达列表末尾时要调用的函数。

您还可以使用 FlatList 的 prop 来定义何时触发上述函数onEndReachedThreshold。

如果你想显示加载指示器，只需添加以下代码：

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