Hey there! Let's walk through how to add pagination (either button-based or infinite scroll) to your React Native product page—since loading all that product data at once can slow things down. Here's a step-by-step breakdown tailored to your existing code:

1. First: Ensure Your Backend Supports Pagination #

Before diving into frontend code, you'll need your API to accept pagination parameters. Most APIs use page (current page number) and limit (items per page) or offset and limit. Update your product endpoint to look like this:

// Example URL with pagination params
const url = `http://www.furnitureinfashion.net/menu_category_listing.php?cat_id=${catId}&page=${currentPage}&limit=${itemsPerPage}`;

Ask your backend team to modify the API to return:

• The list of products for the requested page
• The total number of products in the category (so you know when to stop loading more)

2. Update Frontend State Management #

In your product page component, add state variables to track pagination-related data. If you're using class components:

constructor(props) {
  super(props);
  this.state = {
    currentPage: 1,
    itemsPerPage: 10, // Adjust based on how many items you want per page
    totalProducts: 0,
    productList: [],
    isLoading: false,
  };
}

If you're using functional components with hooks:

import { useState, useEffect } from 'react';

const ProductPage = (props) => {
  const [currentPage, setCurrentPage] = useState(1);
  const [itemsPerPage, setItemsPerPage] = useState(10);
  const [totalProducts, setTotalProducts] = useState(0);
  const [productList, setProductList] = useState([]);
  const [isLoading, setIsLoading] = useState(false);

  // Rest of your component code...
};

3. Adjust Data Fetching Logic #

First, update your category page to pass the cat_id to the product page instead of all the product data (this avoids loading large datasets upfront):

// Category page handlePressProduct
handlePressProduct(id) {
  // Skip fetching all data here—just pass the category ID
  Actions.product({ catId: id });
}

Then, in your product page, add a function to fetch paginated data:

Class Component Example #

componentDidMount() {
  this.fetchPaginatedProducts();
}

fetchPaginatedProducts = () => {
  const { catId } = this.props;
  const { currentPage, itemsPerPage } = this.state;
  
  this.setState({ isLoading: true });

  fetch(`http://www.furnitureinfashion.net/menu_category_listing.php?cat_id=${catId}&page=${currentPage}&limit=${itemsPerPage}`, { method: 'GET' })
    .then(response => response.json())
    .then(responseJson => {
      // Assume backend returns { products: [...], total: 120 }
      this.setState(prevState => ({
        productList: [...prevState.productList, ...responseJson.products],
        totalProducts: responseJson.total,
        isLoading: false,
      }));
    })
    .catch(error => {
      console.error('Error loading products:', error);
      this.setState({ isLoading: false });
    });
};

Functional Component Example #

useEffect(() => {
  fetchPaginatedProducts();
}, []);

// Re-fetch when currentPage changes
useEffect(() => {
  if (currentPage > 1) {
    fetchPaginatedProducts();
  }
}, [currentPage]);

const fetchPaginatedProducts = async () => {
  const { catId } = props;
  setIsLoading(true);
  
  try {
    const response = await fetch(`http://www.furnitureinfashion.net/menu_category_listing.php?cat_id=${catId}&page=${currentPage}&limit=${itemsPerPage}`);
    const responseJson = await response.json();
    
    setProductList(prev => [...prev, ...responseJson.products]);
    setTotalProducts(responseJson.total);
    setIsLoading(false);
  } catch (error) {
    console.error('Error loading products:', error);
    setIsLoading(false);
  }
};

4. Implement Pagination UI (Two Options) #

Choose either a "Load More" button or infinite scroll based on your app's UX:

Option 1: Load More Button #

Add a button at the bottom of your product list to trigger the next page:

// Class component example
{!isLoading && (currentPage * itemsPerPage) < totalProducts && (
  <TouchableOpacity
    style={{ padding: 16, alignItems: 'center' }}
    onPress={() => this.setState({ currentPage: this.state.currentPage + 1 })}
  >
    <Text style={{ fontSize: 16, fontWeight: 'bold' }}>Load More Products</Text>
  </TouchableOpacity>
)}

// Show loading spinner while fetching
{isLoading && (
  <ActivityIndicator size="large" color="#000" style={{ padding: 16 }} />
)}

Option 2: Infinite Scroll (With FlatList) #

Replace your manual map rendering with FlatList (it's optimized for large lists and has built-in scroll triggers):

import { FlatList, ActivityIndicator } from 'react-native';

// Class component example
<FlatList
  data={this.state.productList}
  keyExtractor={(item) => item.ProductId.toString()}
  renderItem={({ item }) => (
    // Your existing product item UI—replace dataImage with item
    <View>
      {item.ProductId != undefined && (
        <View style={productStyle.homeimg1}>
          <TouchableOpacity onPress={this.handlePressProduct.bind(this, item.ProductId)}>
            <Image source={{ uri: uri + item.Image }} style={{ width: 130, height: 130 }} />
            <Text style={productStyle.title}>{item.ProductName}</Text>
            <Text style={productStyle.shopbutton}>View Details</Text>
          </TouchableOpacity>
          {item.Options != '' && (
            <Text style={productStyle.cartbutton}>Select Option</Text>
          )}
          {item.Options == '' && (
            <Text style={productStyle.cartbutton}>Add to cart</Text>
          )}
          <Text> RRP {item.RRPPrice}</Text>
          <Text> Our Price {item.OurPrice}</Text>
          <Text style={productStyle.buymorebutton}>Buy & Save More Today</Text>
          <Text style={productStyle.shiptext}>Free Shipping</Text>
        </View>
      )}
    </View>
  )}
  onEndReached={() => {
    // Trigger load when user scrolls to 10% from the bottom
    if (!this.state.isLoading && (this.state.currentPage * this.state.itemsPerPage) < this.state.totalProducts) {
      this.setState({ currentPage: this.state.currentPage + 1 });
    }
  }}
  onEndReachedThreshold={0.1}
  ListFooterComponent={() => (
    isLoading ? <ActivityIndicator size="large" color="#000" style={{ padding: 16 }} /> : null
  )}
/>

5. Fallback: Frontend-Only Pagination (If Backend Can't Be Modified) #

If you can't update the backend, you can paginate the full dataset locally. Store all products in state and slice them for each page:

// Class component state
state = {
  currentPage: 1,
  itemsPerPage: 10,
  allProducts: this.props.data, // Full dataset from category page
};

// Get data for current page
getCurrentPageData = () => {
  const { currentPage, itemsPerPage, allProducts } = this.state;
  const startIndex = (currentPage - 1) * itemsPerPage;
  const endIndex = startIndex + itemsPerPage;
  return allProducts.slice(startIndex, endIndex);
};

// Render with getCurrentPageData() instead of this.props.data
{this.getCurrentPageData().map((item, index) => (/* Your product UI */))}

Note: This only works for small-to-medium datasets—loading thousands of items upfront will still hurt performance.

6. Quick Performance Optimizations #

• Always use FlatList instead of map for large lists (it renders items on demand)
• Add loading states to avoid duplicate requests
• Handle error states (e.g., show a "Retry" button if the fetch fails)

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