React Native按屏幕配置API请求列表及按需加载方案咨询

Great question! What you're describing is a combination of Lazy Loading (On-Demand Data Fetching) paired with Virtualized List Rendering—and there are established patterns and tools in React Native to handle this perfectly.

Design Pattern Name #

The core pattern here is Lazy Loading (specifically item-level data lazy loading), augmented with a Virtualized List to optimize rendering performance. You can also think of this as implementing a Triggered Data Fetch Layer, where each card's content is only fetched when it's actually needed (i.e., when it enters the user's viewport).

Recommended React Native Components #

Skip the deprecated ListView—React Native has two built-in, optimized components made exactly for this use case:

• FlatList: The go-to for scrollable lists. It virtualizes rendering (only renders items currently in the viewport) and includes props to detect when items become visible.
• SectionList: If your card flow has grouped sections, this is a better fit, but FlatList will work for most standard card layouts.

Best Practices & Implementation Steps #

Here's a step-by-step approach to build your desired flow:

1. Fetch the Screen Config First

   • Start with an initial API call to get your card configuration list. Each entry should include metadata (like card type, position) and the specific API endpoint needed to fetch that card's content.
   • Store this list in your component state or a state management tool (like Context API or Redux) for easy access.

2. Replace ScrollView with FlatList

   • Swap out your ScrollView for FlatList, passing your card config list as the data prop.
   • Use the renderItem prop to render each card. Initially, show a loading placeholder or skeleton until the card's data is fetched.

3. Trigger Data Fetch on Item Visibility

   • Use FlatList's onViewableItemsChanged prop to detect when a card enters the viewport. This prop gives you a list of items currently visible to the user.
   • For each visible item that hasn't had its data fetched yet, trigger the corresponding API call. Be sure to track loading states to avoid duplicate requests for the same card.

4. Manage Individual Card State

   • Maintain a state object (e.g., cardData) where keys are unique card IDs, and values include the fetched data, loading status, and any error messages.
   • When an API call completes, update this state to populate the card's content.

5. Implement Pagination

   • Your initial screen config API should return a pagination token or next page URL.
   • Use FlatList's onEndReached prop to detect when the user scrolls to the bottom of the list. When this happens, fetch the next page of card configs and append them to your existing list.

6. Add Caching (Optional but Recommended)

   • Cache fetched card data so users don't re-fetch content if they scroll back up. You can use React Native's built-in AsyncStorage for simple caching, or a dedicated library (see below) for more robust handling.

Useful Libraries #

To simplify data fetching and state management, consider these tools:

• React Query: Handles caching, background updates, loading/error states, and request deduplication. Perfect for triggering API calls when items become visible.
• SWR: Similar to React Query, with a focus on stale-while-revalidate caching to keep data fresh without extra work.
• AsyncStorage: Built-in React Native storage for simple, persistent caching of fetched data.

Example Code Snippet #

Here's a simplified example using FlatList and React Query:

import React, { useState, useRef } from 'react';
import { FlatList, View, Text, ActivityIndicator, StyleSheet } from 'react-native';
import { useQuery, useQueryClient } from '@tanstack/react-query';

const CardFlow = () => {
  const [cardConfigs, setCardConfigs] = useState([]);
  const [nextPageUrl, setNextPageUrl] = useState(null);
  const queryClient = useQueryClient();
  const viewabilityConfig = useRef({ itemVisiblePercentThreshold: 50 });

  // Fetch initial screen configuration
  const { isLoading: configLoading } = useQuery({
    queryKey: ['screenConfig'],
    queryFn: async () => {
      const res = await fetch('https://your-api.com/screen-config');
      const data = await res.json();
      setCardConfigs(data.items);
      setNextPageUrl(data.nextPage);
      return data;
    },
  });

  // Handle pagination
  const loadNextPage = async () => {
    if (!nextPageUrl) return;
    const res = await fetch(nextPageUrl);
    const data = await res.json();
    setCardConfigs(prev => [...prev, ...data.items]);
    setNextPageUrl(data.nextPage);
  };

  // Render individual card
  const renderCard = ({ item }) => {
    const { data, isLoading } = useQuery({
      queryKey: ['cardData', item.id],
      queryFn: async () => {
        const res = await fetch(item.apiUrl);
        return res.json();
      },
      enabled: false, // Disable auto-fetch until item is visible
    });

    if (isLoading) return <ActivityIndicator style={styles.loader} />;
    if (!data) return <View style={styles.placeholder}><Text>Loading card...</Text></View>;

    return (
      <View style={styles.card}>
        <Text style={styles.cardTitle}>{data.title}</Text>
        <Text style={styles.cardDesc}>{data.description}</Text>
      </View>
    );
  };

  // Trigger data fetch when item becomes visible
  const handleViewableItemsChanged = ({ viewableItems }) => {
    viewableItems.forEach(({ item }) => {
      queryClient.fetchQuery({
        queryKey: ['cardData', item.id],
        queryFn: async () => {
          const res = await fetch(item.apiUrl);
          return res.json();
        },
      });
    });
  };

  if (configLoading) return <ActivityIndicator style={styles.fullLoader} />;

  return (
    <FlatList
      data={cardConfigs}
      renderItem={renderCard}
      keyExtractor={item => item.id}
      onEndReached={loadNextPage}
      onEndReachedThreshold={0.1}
      onViewableItemsChanged={handleViewableItemsChanged}
      viewabilityConfig={viewabilityConfig.current}
      contentContainerStyle={styles.listContainer}
    />
  );
};

const styles = StyleSheet.create({
  fullLoader: { flex: 1, justifyContent: 'center' },
  listContainer: { paddingVertical: 16 },
  card: { padding: 16, marginHorizontal: 16, marginBottom: 12, backgroundColor: '#f8f8f8', borderRadius: 8 },
  cardTitle: { fontSize: 18, fontWeight: '600', marginBottom: 8 },
  cardDesc: { fontSize: 14, color: '#666' },
  placeholder: { padding: 32, alignItems: 'center', backgroundColor: '#f0f0f0', marginHorizontal: 16, marginBottom: 12, borderRadius: 8 },
  loader: { padding: 32 },
});

export default CardFlow;

内容的提问来源于stack exchange，提问作者sebastianf182