React Native中如何自动显示与隐藏加载进度条？

Got it, let's tweak your existing Axios interceptors to add a loading progress bar that works reliably—even with multiple concurrent requests. Here's how to do it properly:

Option 1: Use a Library (NProgress, Easy & Robust) #

NProgress is a lightweight, popular library for progress bars. It handles most animation and edge cases out of the box.

First, install it:

npm install nprogress

Then update your interceptors with this code:

import NProgress from 'nprogress';
import 'nprogress/nprogress.css'; // Don't forget the styles!

// Track active requests to avoid premature progress bar closure
let activeRequests = 0;

// Request Interceptor
axios.interceptors.request.use(function (config) {
  activeRequests++;
  // Start the progress bar only on the first active request
  if (activeRequests === 1) {
    NProgress.start();
  }
  console.log("before request");
  return config;
}, function (error) {
  // Even if the request fails, decrement the counter and clean up
  activeRequests--;
  if (activeRequests === 0) {
    NProgress.done();
  }
  console.log("before request error");
  return Promise.reject(error);
});

// Response Interceptor
axios.interceptors.response.use(function (response) {
  activeRequests--;
  // Close the progress bar when all requests are done
  if (activeRequests === 0) {
    NProgress.done();
  }
  console.log("request success");
  return response;
}, function (error) {
  activeRequests--;
  if (activeRequests === 0) {
    NProgress.done();
  }
  console.log("request error");
  return Promise.reject(error);
});

Key Details: #

• Active Request Counter: This prevents the progress bar from disappearing early when multiple requests are running. Only when the last request finishes (success or failure) do we close the bar.
• NProgress Controls: NProgress.start() kicks off the animation, and NProgress.done() completes it. The library handles smooth progress increments automatically.

Option 2: Custom Progress Bar (No External Libraries) #

If you want to build your own without dependencies, here's a simple implementation using a DOM element:

First, add this HTML to your page:

<div id="custom-loading-bar" style="
  position: fixed;
  top: 0;
  left: 0;
  width: 0%;
  height: 3px;
  background: #2196F3;
  z-index: 9999;
  transition: width 0.3s ease;
"></div>

Then update your interceptors:

const loadingBar = document.getElementById('custom-loading-bar');
let activeRequests = 0;

axios.interceptors.request.use(function (config) {
  activeRequests++;
  if (activeRequests === 1) {
    // Initialize progress bar on first request
    loadingBar.style.width = '25%';
  }
  console.log("before request");
  return config;
}, function (error) {
  activeRequests--;
  if (activeRequests === 0) {
    loadingBar.style.width = '0%';
  }
  console.log("before request error");
  return Promise.reject(error);
});

axios.interceptors.response.use(function (response) {
  activeRequests--;
  if (activeRequests === 0) {
    // Animate to 100% before hiding
    loadingBar.style.width = '100%';
    setTimeout(() => {
      loadingBar.style.width = '0%';
    }, 300);
  } else {
    // Increment progress based on remaining requests
    const progress = Math.min(25 + (70 / activeRequests), 90);
    loadingBar.style.width = `${progress}%`;
  }
  console.log("request success");
  return response;
}, function (error) {
  activeRequests--;
  if (activeRequests === 0) {
    loadingBar.style.width = '0%';
  }
  console.log("request error");
  return Promise.reject(error);
});

Customization Tips: #

• Adjust the background color, height, or transition speed in the CSS to match your app's design.
• Tweak the progress calculation logic to make the bar fill at a rate that feels natural for your requests.

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