如何在Flatlist/ Scrollview react native中添加带文本或图标视图的loadmore

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

const MyComponent = () => {
  const [isLoading, setIsLoading] = useState(false);
  const [data, setData] = useState([]);

  const fetchData = async () => {
    // 模拟异步获取数据
    setIsLoading(true);
    const response = await fetch('https://api.example.com/data');
    const newData = await response.json();
    setData([...data, ...newData]);
    setIsLoading(false);
  };

  const renderFooter = () => {
    if (!isLoading) return null;
    return (
      <View>
        <Text>加载中...</Text>
      </View>
    );
  };

  return (
    <FlatList
      data={data}
      renderItem={({ item }) => <Text>{item}</Text>}
      keyExtractor={(item, index) => index.toString()}
      onEndReached={fetchData}
      ListFooterComponent={renderFooter}
    />
  );
};

export default MyComponent;