如何在React Native中打开文件管理器选择并读取.pem文件内容

步骤1：安装依赖库 #

使用react-native-document-picker实现文件选择（支持类型过滤），react-native-fs用于读取文件内容：

npm install react-native-document-picker react-native-fs
# 或用yarn
yarn add react-native-document-picker react-native-fs

步骤2：配置权限 #

• iOS：在Info.plist中添加文件访问权限描述：

  <key>NSDocumentPickerUsageDescription</key>
  <string>需要访问设备文件以选择.pem证书文件</string>
  

• Android：在AndroidManifest.xml中添加读取存储权限（RN版本<0.60需手动添加，新版本依赖会自动处理权限请求）：

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

步骤3：核心代码实现 #

import DocumentPicker from 'react-native-document-picker';
import RNFS from 'react-native-fs';

const selectAndReadPemFile = async () => {
  try {
    // 打开文件选择器，仅允许选择.pem格式文件
    const pickedFile = await DocumentPicker.pick({
      // 方式1：通过MIME类型过滤（更精准）
      type: [DocumentPicker.types.custom('application/x-pem-file')],
      // 方式2：通过扩展名过滤（兼容性更好）
      // type: [DocumentPicker.types.allFiles],
      // allowExtensions: ['pem']
    });

    // 读取文件内容为UTF-8字符串
    const pemContent = await RNFS.readFile(pickedFile.uri, 'utf8');
    
    // 这里可以对内容进行后续处理（比如存储到状态、验证格式等）
    console.log('读取到的PEM内容:', pemContent);
  } catch (error) {
    if (DocumentPicker.isCancel(error)) {
      console.log('用户取消了文件选择');
      return;
    }
    console.error('文件选择或读取失败:', error);
  }
};

关键说明 #

• 两种过滤方式任选其一：allowExtensions直接指定扩展名兼容性更强，部分设备可能不识别application/x-pem-file这个MIME类型；
• 读取文件时使用utf8编码确保PEM内容以字符串形式正确返回；
• 错误处理区分用户取消操作和真正的错误，提升交互体验。

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