拖动以在视图上刷新和活动指示器

import React, { useState, useEffect } from 'react';
import { View, Text, FlatList, ActivityIndicator, RefreshControl } from 'react-native';

const App = () => {
  const [data, setData] = useState([]);
  const [refreshing, setRefreshing] = useState(false);
  const [loadingMore, setLoadingMore] = useState(false);

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

  const fetchData = async () => {
    setRefreshing(true);
    // 模拟网络请求
    await new Promise(resolve => setTimeout(resolve, 2000));
    setData([...data, ...Array.from({ length: 10 }, (_, i) => `Item ${data.length + i}`)]);
    setRefreshing(false);
  };

  const handleLoadMore = async () => {
    if (!loadingMore) {
      setLoadingMore(true);
      // 模拟加载更多数据
      await new Promise(resolve => setTimeout(resolve, 2000));
      setData([...data, ...Array.from({ length: 10 }, (_, i) => `Item ${data.length + i}`)]);
      setLoadingMore(false);
    }
  };

  return (
    <FlatList
      data={data}
      keyExtractor={(item, index) => index.toString()}
      renderItem={({ item }) => <Text>{item}</Text>}
      refreshControl={
        <RefreshControl refreshing={refreshing} onRefresh={fetchData} />
      }
      onEndReached={handleLoadMore}
      onEndReachedThreshold={0.5}
      ListFooterComponent={() => (loadingMore ? <ActivityIndicator size="large" color="#0000ff" /> : null)}
    />
  );
};

export default App;