React-Native：使用Document Picker加载PDF并显示时如何解决权限拒绝问题

问题根源 #

安卓系统中，content:// 开头的URI是通过内容提供者（Content Provider）暴露的文件路径，react-native-pdf直接读取这类路径时会触发权限拒绝——DocumentPicker获取的临时访问权限仅限自身使用，无法直接传递给其他组件。

可行解决方案 #

1. 转换content://为真实文件路径 #

借助react-native-fs库将内容URI转成可直接访问的文件绝对路径：

• 安装依赖：

npm install react-native-fs --save
# 或 yarn add react-native-fs

• 修改文件选择逻辑：

import RNFS from 'react-native-fs';

function pickFile() {
    DocumentPicker.pickSingle({
        type: [DocumentPicker.types.pdf], // 建议指定PDF类型，缩小选择范围
    })
    .then(async (response) => {
        let filePath = response.uri;
        // 处理content://格式路径
        if (filePath.startsWith('content://')) {
            const realPath = await RNFS.readFileContentUri(filePath);
            filePath = realPath;
        }
        setPickedFile({...response, uri: filePath});
    })
    .catch((error) => {
        console.error(error);
    });
}

2. 直接使用临时文件路径（部分场景适用） #

部分版本的react-native-document-picker会返回file://开头的临时文件路径，可直接传给react-native-pdf：

// react-native-pdf组件使用示例
<Pdf
    source={{uri: pickedFile.uri}}
    style={{flex: 1}}
/>

3. 补充文件读取权限配置 #

• 安卓Manifest文件添加权限：
  打开android/app/src/main/AndroidManifest.xml，插入：

<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
<!-- 安卓13及以上需额外添加 -->
<uses-permission android:name="android.permission.READ_MEDIA_DOCUMENTS" />

• 动态申请权限：

import {PermissionsAndroid} from 'react-native';

async function requestFilePermission() {
    const granted = await PermissionsAndroid.request(
        PermissionsAndroid.PERMISSIONS.READ_EXTERNAL_STORAGE,
        {
            title: "文件读取权限申请",
            message: "需要访问您的文件以展示PDF",
            buttonPositive: "允许"
        }
    );
    return granted === PermissionsAndroid.RESULTS.GRANTED;
}

// 在选择文件前校验权限
async function pickFile() {
    const hasPermission = await requestFilePermission();
    if (!hasPermission) {
        console.log("权限被拒绝，无法访问文件");
        return;
    }
    // 后续DocumentPicker逻辑...
}

验证PDF组件配置 #

确保react-native-pdf的source参数格式正确：

<Pdf
    source={{uri: pickedFile.uri, cache: false}} // 关闭缓存避免路径冲突
    onLoadComplete={(pageCount) => console.log(`PDF加载完成，共${pageCount}页`)}
    onError={(error) => console.error("PDF加载失败:", error)}
    style={{flex: 1}}
/>

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