React Native 我想得到所有的PDF文件名和路径存储在Android设备,并在屏幕上列出它们

4szc88ey  于 6个月前  发布在  React
关注(0)|答案(2)|浏览(67)

我已经使用react-native-fs & react-native-blob来阅读设备外部存储中的文件。我想获取存储在Android设备中的所有PDF书籍并将其列在屏幕上。但我没有成功从设备中获取所有PDF文件。

oyxsuwqo

oyxsuwqo1#

一年前,我在这样一个应用程序上工作,我必须列出所有文档,如(PDF,XLSX,DOC,DOCX,PNG,JPG).为此,你在Android中,你必须使用Android中的媒体商店iOS我不知道这一点.
下面是link给我自己的答案。

rur96b6h

rur96b6h2#

要使用React Native列出存储在Android设备上的所有PDF文件并将其显示在屏幕上,您可以使用react-native-fs库访问文件系统,并使用react-native-document-picker过滤和选择PDF文件。这里我分享的是示例代码片段,因此您可以根据您的实现和需求修改它:
1.安装所需的软件包:

npm install react-native-fs react-native-document-picker

字符串
1.使用以下命令链接包**(react native 0.60及以上版本不需要)**:

npx react-native link react-native-fs
npx react-native link react-native-document-picker


1.在AndroidManifest.xml文件中请求外部存储访问权限和文档拾取权限。在<application>元素中添加以下行:

<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />


1.为PDF列表组件创建一个JavaScript文件,例如PDFList.js。下面是一个如何列出PDF文件的基本示例:

import React, { useState, useEffect } from 'react';
import { View, Text, FlatList } from 'react-native';
import DocumentPicker from 'react-native-document-picker';
import RNFS from 'react-native-fs';

const PDFList = () => {
  const [pdfFiles, setPdfFiles] = useState([]);

  const getPdfFiles = async () => {
    try {
      const result = await DocumentPicker.pick({
        type: [DocumentPicker.types.pdf],
      });

      const pdfFilePath = result.uri;
      const pdfFileName = result.name;

      setPdfFiles((prevFiles) => [...prevFiles, { name: pdfFileName, path: pdfFilePath }]);
    } catch (error) {
      console.log(error);
    }
  };

  useEffect(() => {
    // You can trigger this function on a button press or in your component's lifecycle
    getPdfFiles();
  }, []);

  return (
    <View>
      <Text>List of PDF Files:</Text>
      <FlatList
        data={pdfFiles}
        keyExtractor={(item) => item.path}
        renderItem={({ item }) => (
          <Text>{item.name}</Text>
        )}
      />
    </View>
  );
};

export default PDFList;


在本例中,我们使用DocumentPicker选择PDF文件,并在FlatList中显示它们的名称。您可以根据需要进一步自定义组件和文件处理。
确保您在AndroidManifest.xml中设置了适当的权限,并链接了所需的依赖项。此外,请考虑在生产应用中更优雅地处理权限和错误情况。

相关问题