React Native Document Picker的pick方法在Android端无法正常终止问题

问题核心 #

使用react-native-document-picker 10.1.1 + React Native 0.74.1时，取消文件选择后再次触发选择会报错previous promise did not settle，且选择文件后无结果返回，本质是pick()方法的promise在取消/选择操作后未正确resolve或reject，导致promise长期处于pending状态，触发库的重复调用保护机制。

可行解决方案 #

1. 加调用锁避免重复触发 #

在组件中维护状态标记是否正在进行文件选择，防止重复调用pick()：

import { useState } from 'react';
import { pick, types } from '@react-native-documents/picker';
import { Button } from 'react-native';

// 组件内部状态
const [isPicking, setIsPicking] = useState(false);

const handlePickFile = async () => {
  if (isPicking) return;
  setIsPicking(true);
  
  try {
    const [pickResult] = await pick({
      type: types.allFiles, // 可根据需求指定文件类型
    });
    console.log("选中文件: ", pickResult);
  } catch (err: unknown) {
    console.error("选择出错: ", err);
    // 区分用户取消和其他错误
    if (err instanceof Error && err.message.includes("User cancelled")) {
      console.log("用户取消选择");
    }
  } finally {
    // 无论成功失败，都重置状态
    setIsPicking(false);
  }
};

// 按钮渲染
<Button
  title="UPLOAD"
  onPress={handlePickFile}
/>

2. 降级库版本到稳定兼容版 #

10.1.1版本可能存在与RN 0.74.1的兼容bug，尝试降级到10.0.1版本：

# npm
npm install @react-native-documents/picker@10.0.1

# yarn
yarn add @react-native-documents/picker@10.0.1

3. 替换为明确的选择方法 #

部分版本中pick()方法存在逻辑问题，尝试使用库提供的pickSingle()（单文件）或pickMultiple()（多文件）方法：

// 单文件选择示例
const handlePickFile = async () => {
  if (isPicking) return;
  setIsPicking(true);
  try {
    const pickResult = await pickSingle();
    console.log("选中文件: ", pickResult);
  } catch (err) {
    console.error(err);
  } finally {
    setIsPicking(false);
  }
};

4. 检查原生配置完整性 #

确保iOS和Android的权限配置正确：

• iOS：在Info.plist中添加NSDocumentPickerUsageDescription，说明文件选择的用途
• Android：针对Android 13及以下版本，在AndroidManifest.xml中添加<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />

验证步骤 #

1. 加调用锁后，重复点击按钮时，前一次选择未完成则不会触发新的调用，避免报错
2. 降级版本后，测试取消选择和选择文件流程，确认promise能正常settle，文件结果能正确返回

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