使用Expo时调用DocumentPicker.pick报错：Cannot read property 'pick' of null

在Expo开发项目时，使用文档选择功能触发以下错误：

TypeError: Cannot read property 'pick' of null

项目相关信息 #

package.json配置 #

{
  "name": "project",
  "version": "1.0.0",
  "main": "node_modules/expo/AppEntry.js",
  "scripts": {
    "start": "expo start",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "web": "expo start --web"
  },
  "dependencies": {
    "@expo/vector-icons": "^13.0.0",
    "@react-native-async-storage/async-storage": "1.18.2",
    "@react-navigation/bottom-tabs": "^6.5.8",
    "@react-navigation/native": "^6.1.7",
    "@react-navigation/native-stack": "^6.9.13",
    "@reduxjs/toolkit": "^1.9.5",
    "@types/react": "~18.2.14",
    "axios": "^1.4.0",
    "expo": "~49.0.7",
    "expo-status-bar": "~1.6.0",
    "formik": "^2.4.3",
    "react": "18.2.0",
    "react-native": "0.72.4",
    "react-native-document-picker": "^8.1.4",
    "react-native-reanimated": "~3.3.0",
    "react-native-safe-area-context": "4.6.3",
    "react-native-screens": "~3.22.0",
    "react-redux": "^8.1.2",
    "typescript": "^5.1.3",
    "yup": "^1.2.0"
  },
  "devDependencies": {
    "@babel/core": "^7.20.0"
  },
  "private": true
}

DocumentPicker导入方式 #

import DocumentPicker from "react-native-document-picker";

文档选择处理函数 #

const handleDocumentSelect = async () => {
try {
  const document = await DocumentPicker.pick()
  console.log(document);
} catch (error) {
  if (!DocumentPicker.isCancel(error)) {
    console.log("Error Take Document", error);
  }
}
};

触发按钮代码 #

<Pressable
  onPress={handleDocumentSelect}
  style={[styles.btnContainer, style]}
>
  <View style={styles.iconContainer}>{icon}</View>
  <Text style={styles.btnTitle}>{btnTitle}</Text>
</Pressable>

错误原因及解决办法 #

• 错误原因：react-native-document-picker是原生React Native库，Expo Go环境不支持直接加载未经过Expo适配的原生模块，导致DocumentPicker实例为null，调用pick方法时触发报错。

解决步骤：

1. 卸载原生版本的文档选择库

npm uninstall react-native-document-picker
# 或使用yarn：yarn remove react-native-document-picker

2. 安装Expo官方适配的文档选择库

npx expo install expo-document-picker

3. 替换导入和使用代码

// 替换原导入语句
import * as DocumentPicker from 'expo-document-picker';

// 更新文档选择处理函数
const handleDocumentSelect = async () => {
  try {
    const result = await DocumentPicker.getDocumentAsync({
      type: '*/*', // 可指定文件类型，例如'application/pdf'限制仅选PDF
    });

    if (!result.canceled) {
      console.log('选中文档信息:', result.assets[0]);
    }
  } catch (error) {
    console.log('文档选择出错:', error);
  }
};

4. 清除缓存并重启Expo开发服务器

npx expo start -c

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