@nativescript/imagepicker在Android选图时触发getName空值读取错误

问题背景 #

从nativescript-mediafilepicker迁移到@nativescript/imagepicker@2.0.1后，iOS平台图片选择功能正常，但Android平台选择图片时抛出错误：

TypeError: Cannot read properties of null (reading 'getName')

环境配置 #

依赖包 #

"dependencies": {
    "@angular/animations": "^15.2.0",
    "@angular/common": "^15.2.0",
    "@angular/compiler": "^15.2.0",
    "@angular/core": "^15.2.0",
    "@angular/forms": "^15.2.0",
    "@angular/platform-browser": "^15.2.0",
    "@angular/platform-browser-dynamic": "^15.2.0",
    "@angular/router": "^15.2.0",
    "@nativescript-community/universal-links": "^3.0.0",
    "@nativescript/angular": "^15.2.0",
    "@nativescript/appversion": "~2.0.0",
    "@nativescript/background-http": "^6.0.0",
    "@nativescript/core": "~8.5.0",
    "@nativescript/datetimepicker": "^2.1.11",
    "@nativescript/email": "^2.0.5",
    "@nativescript/imagepicker": "^2.0.1",
    "@nativescript/iqkeyboardmanager": "^2.1.1",
    "@nativescript/social-share": "^2.0.4",
    "@nativescript/theme": "~3.0.2",
    "@nota/nativescript-webview-ext": "^8.0.2",
    "@nstudio/nativescript-barcodescanner": "^5.0.1",
    "crypto-js": "^4.1.1",
    "eslint": "^7.25.0",
    "nativescript-phone": "^3.0.3",
    "nativescript-plugin-universal-links": "^2.0.0",
    "nativescript-ui-gauge": "^15.2.3",
    "nativescript-ui-listview": "^15.2.3",
    "nativescript-ui-sidedrawer": "^15.2.3",
    "reflect-metadata": "~0.1.12",
    "rxjs": "~7.5.0",
    "shelljs": "^0.8.4",
    "zone.js": "~0.11.5"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^15.2.5",
    "@angular/compiler-cli": "^15.2.0",
    "@nativescript/android": "~8.5.0",
    "@nativescript/ios": "~8.5.1",
    "@nativescript/types": "~8.5.0",
    "@nativescript/webpack": "~5.0.14",
    "@ngtools/webpack": "^15.2.5",
    "codelyzer": "~6.0.0",
    "sass": "^1.49.9",
    "semver": "^7.3.4",
    "typescript": "^4.9.4",
    "url-parse": "^1.5.10"
  }

NS环境信息 #

Getting NativeScript components versions information...
✔ Component nativescript has 8.5.3 version and is up to date.
✔ Component @nativescript/core has 8.5.3 version and is up to date.
✔ Component @nativescript/ios has 8.5.1 version and is up to date.
✔ Component @nativescript/android has 8.5.0 version and is up to date.

解决方案 #

1. 配置Android媒体权限 #

Android 12及以下需要READ_EXTERNAL_STORAGE权限，Android 13+需要READ_MEDIA_IMAGES权限。在App_Resources/Android/src/main/AndroidManifest.xml中添加：

<!-- Android 12及以下 -->
<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
<!-- Android 13+ -->
<uses-permission android:name="android.permission.READ_MEDIA_IMAGES" />

在代码中主动请求权限：

import { requestPermissions, hasPermissions } from "@nativescript/core";

async function checkAndRequestPermissions(): Promise<boolean> {
  const requiredPermissions = android.os.Build.VERSION.SDK_INT >= 33
    ? ["android.permission.READ_MEDIA_IMAGES"]
    : ["android.permission.READ_EXTERNAL_STORAGE"];

  if (!(await hasPermissions(requiredPermissions))) {
    const permissionResult = await requestPermissions(requiredPermissions);
    return permissionResult[requiredPermissions[0]] === true;
  }
  return true;
}

2. 修复图片选择后的空值判断 #

确保在调用getName()前先校验选中的图片对象不为null：

import { ImagePicker, ImagePickerOptions } from "@nativescript/imagepicker";

async function openImagePicker() {
  const hasPermission = await checkAndRequestPermissions();
  if (!hasPermission) {
    console.log("未获得图片访问权限");
    return;
  }

  const pickerOptions: ImagePickerOptions = {
    mode: "single",
    mediaType: "image"
  };

  const imagePicker = await ImagePicker.create(pickerOptions);
  imagePicker.show().then((selectedItems) => {
    if (selectedItems && selectedItems.length > 0) {
      selectedItems.forEach((item) => {
        // 先判断item是否存在，再调用getName()
        if (item) {
          const fileName = item.getName();
          console.log("选中的文件名:", fileName);
          // 后续文件处理逻辑
        }
      });
    }
  }).catch((error) => {
    console.error("图片选择失败:", error);
  });
}

3. 清理缓存并重新构建 #

执行以下命令清理项目缓存，避免旧依赖残留：

ns clean
npm install
ns run android

4. 正确处理Android文件路径 #

如果需要获取文件的本地路径，使用@nativescript/core的FileSystem模块确保路径解析正确：

import { FileSystem } from "@nativescript/core";

if (item) {
  const file = FileSystem.getFile(item.file.path);
  console.log("文件本地路径:", file.path);
}

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