React Native安卓APP不稳定网络下音频上传卡顿及体验优化方案咨询

1. 将上传操作完全剥离至后台线程 #

React Native的JS线程为单线程，若音频上传任务在JS线程执行，网络卡顿会直接阻塞UI导致应用冻结。

• 可使用react-native-background-upload或自定义原生模块，将上传任务交给安卓原生的WorkManager或IntentService处理，彻底脱离JS线程。
• 示例代码（基于react-native-background-upload）：

import BackgroundUpload from 'react-native-background-upload';

const uploadOptions = {
  url: '你的上传接口地址',
  path: 'file:///storage/emulated/0/recordings/audio.mp3',
  method: 'POST',
  headers: {
    'Content-Type': 'audio/mpeg'
  },
  notification: {
    enabled: true,
    title: '音频上传中'
  }
};

BackgroundUpload.startUpload(uploadOptions)
  .then(taskId => {
    BackgroundUpload.addListener('progress', taskId, (data) => {
      console.log(`上传进度: ${data.progress}%`);
      // 异步更新UI进度
    });
    BackgroundUpload.addListener('error', taskId, (error) => {
      console.log('上传失败:', error);
      // 触发重试或提示用户
    });
    BackgroundUpload.addListener('completed', taskId, (response) => {
      console.log('上传完成:', response);
    });
  })
  .catch(err => console.log('上传启动失败:', err));

2. 实现智能重试与超时控制 #

不稳定网络下必须处理超时和失败场景，避免任务无限阻塞：

• 给上传请求设置合理超时时间（如30秒），超时后自动中断并反馈用户。
• 采用指数退避重试策略：第一次失败后间隔2秒重试，第二次4秒，第三次8秒，最多重试3次，避免频繁请求加剧网络负担。
• 安卓原生层可通过OkHttp配置重试拦截器：

OkHttpClient client = new OkHttpClient.Builder()
    .connectTimeout(30, TimeUnit.SECONDS)
    .readTimeout(30, TimeUnit.SECONDS)
    .writeTimeout(30, TimeUnit.SECONDS)
    .retryOnConnectionFailure(true)
    .addInterceptor(new Interceptor() {
        @Override
        public Response intercept(Chain chain) throws IOException {
            Request request = chain.request();
            Response response = null;
            IOException exception = null;
            int retryCount = 0;
            final int maxRetries = 3;

            while (retryCount < maxRetries) {
                try {
                    response = chain.proceed(request);
                    if (response.isSuccessful()) {
                        return response;
                    }
                } catch (IOException e) {
                    exception = e;
                }
                retryCount++;
                Thread.sleep((long) Math.pow(2, retryCount) * 1000);
            }
            throw exception != null ? exception : new IOException("上传失败，重试次数已达上限");
        }
    })
    .build();

3. 实时网络状态监听与用户交互 #

让用户及时感知网络变化，避免因状态不透明产生困惑：

• 使用@react-native-community/netinfo监听网络状态，网络断开时暂停上传，恢复时自动续传。
• 上传过程中实时提示网络状态，比如“当前网络不稳定，上传可能延迟”。

import NetInfo from '@react-native-community/netinfo';
import { Alert } from 'react-native';

let uploadPaused = false;
let currentTaskId = '';

// 监听网络状态变化
const unsubscribe = NetInfo.addEventListener(state => {
  if (!state.isConnected) {
    BackgroundUpload.pauseUpload(currentTaskId);
    uploadPaused = true;
    Alert.alert('提示', '网络已断开，上传已暂停');
  } else if (state.isConnected && uploadPaused) {
    BackgroundUpload.resumeUpload(currentTaskId);
    uploadPaused = false;
    Alert.alert('提示', '网络已恢复，上传继续');
  }
});

4. 优化音频文件与上传策略 #

减少上传数据量，降低网络压力：

• 录制完成后对音频进行压缩：比如将采样率降至22kHz，转换为低比特率MP3格式，可通过react-native-audio-toolkit或原生MediaCodec实现。
• 分块上传大音频：将音频切割为多个小片段，逐个上传，全部完成后由服务端拼接，某一块失败仅需重传该片段，避免整体任务失败。

5. 避免UI线程阻塞的细节 #

• 所有上传相关的状态更新（进度、结果）均通过setState或状态管理工具异步执行，不在同步回调中做大量计算。
• 上传过程中禁用相关操作按钮（如“重新录制”），同时添加加载状态（如旋转的ActivityIndicator），防止用户重复触发任务。

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