React-Native 中的 DocumentPicker 在 Android 设备上无法正常工作答案

【问题标题】：DocumentPicker in React-Native not working properly for Android devicesReact-Native 中的 DocumentPicker 在 Android 设备上无法正常工作
【发布时间】：2021-03-01 12:31:13
【问题描述】：

我在我的 react native 应用程序中实现了一个文档选择器，它在 iOS 上运行良好。但是在 Android 中，我遇到了一个奇怪的问题

当我打开文档选择器并导航到 Android 手机中的文件资源管理器（下载部分）时，虽然我可以选择 pdf 文件，但是当返回应用程序时，它卡在页面上并且该文件不存在。我附上了屏幕截图当文件资源管理器进入最近的文件时，行为相同。只有当我从最近的文件中选择谷歌驱动器并尝试从那里选择 pdf 时，它才能按预期工作，并且我可以在我的应用程序中看到该文件并且应用程序不会卡住。

这是我为 pdf 文档选择器编写的内容

selectPDF = async ()=>{

      
        var imageList = [...this.state.files];


        try {
            const results = await DocumentPicker.pickMultiple({
            type: [DocumentPicker.types.pdf],
            });
            for (const res of results) {

                    console.log(
                        res.uri,
                        res.type, // mime type
                        res.name,
                        res.size
                    );

                    const fileName = res.uri.replace("file://","");
                    let data1 = ''
                    RnFetchBlob.fs.readStream(
                        fileName,
                        'base64',
                        4095
                    )
                    .then((ifstream)=>{
                        //let data1 = ''
                        ifstream.open()
                        ifstream.onData((data)=>{
                            data1 += data;


                        })

                        ifstream.onEnd(() => {
                           
                            let base64 = data1
                   
                                                     
                            imageList.push({
                                imageName:res.name,
                                image:base64,
                                mime:res.type,
                                size:res.size
                            })

                            this.setState({
                                ...this.state,
                                openCamera:false,
                                lastFileName:imageList[imageList.length - 1].imageName,
                                files:imageList
                            })

                        })
                    })



            }
        } catch (err) {
            if (DocumentPicker.isCancel(err)) {
                    this.closeModal();
            } else {
            throw err;
            }
        }
    }

任何人都可以对我可能遗漏的内容有所了解。是否需要在设备级别或其他任何东西上设置一些配置。

【问题讨论】：

标签： react-native upload document picker

【解决方案1】：

你可以使用这样的东西，

const [file, setFile] = useState(null);

const selectFile = async () => {
    try {
      const results = await DocumentPicker.pickMultiple({
        type: [DocumentPicker.types.allFiles],
      });
      setFile(results);
    } catch (err) {
      if (DocumentPicker.isCancel(err)) {
        alert('Canceled');
      } else {
        alert('Unknown Error: ' + JSON.stringify(err));
        throw err;
      }
    }
  };

现在你可以在你的函数中调用 file 并使用它，你可以这样做

<TouchableOpacity
            activeOpacity={0.5}
            onPress={selectFile}>
            <Text>Select File</Text>
</TouchableOpacity>

【讨论】：