如何在React-js/React native中处理多个API调用的全局加载屏幕？

import React, { useState } from 'react';

// 全局加载屏幕组件
const LoadingScreen = () => {
  return (
    <div>
      <div className="loading-animation"></div>
      <p>Loading...</p>
    </div>
  );
};

// 应用组件
const App = () => {
  const [isLoading, setIsLoading] = useState(false);

  // 发起API调用
  const fetchData = async () => {
    setIsLoading(true);

    try {
      const response = await fetch('https://api.example.com/data');
      const data = await response.json();
      // 处理API响应数据
      console.log(data);
    } catch (error) {
      // 处理错误
      console.error(error);
    }

    setIsLoading(false);
  };

  // 处理多个API调用
  const handleMultipleAPIs = async () => {
    setIsLoading(true);

    try {
      const response1 = await fetch('https://api.example.com/data1');
      const data1 = await response1.json();
      // 处理API1响应数据
      console.log(data1);

      const response2 = await fetch('https://api.example.com/data2');
      const data2 = await response2.json();
      // 处理API2响应数据
      console.log(data2);
    } catch (error) {
      // 处理错误
      console.error(error);
    }

    setIsLoading(false);
  };

  return (
    <div>
      {isLoading && <LoadingScreen />}
      <button onClick={fetchData}>Fetch Data</button>
      <button onClick={handleMultipleAPIs}>Handle Multiple APIs</button>
    </div>
  );
};

export default App;