Expo应用图片选择器异常求助：TypeError错误排查

核心配置错误修复 #

你的app.json存在关键配置错误：expo-image-picker和expo-build-properties的插件配置被错误放在了splash节点下，这会导致插件无法正确生效，直接引发图片选择功能异常。

正确配置需将plugins作为expo的直接子节点，与splash同级：

{
  "expo": {
    "name": "lottery",
    "runtimeVersion": {
      "policy": "sdkVersion"
    },
    "updates": {
      "fallbackToCacheTimeout": 0,
      "url": "https://u.expo.dev/292e68aa-3480-4c01-b697-6672a8d899fc"
    },
    "slug": "lottery",
    "version": "1.0.2",
    "orientation": "portrait",
    "icon": "./assets/lottery-icon.png",
    "userInterfaceStyle": "light",
    "splash": {
      "image": "./assets/lottery-background.png"
    },
    "plugins": [
      [
        "expo-image-picker",
        {
          "photosPermission": "The app accesses your photos to let you share them with your friends."
        }
      ],
      [
        "expo-build-properties",
        {
          "android": {
            "enableProguardInReleaseBuilds": true
          }
        }
      ]
    ],
    "assetBundlePatterns": ["**/*"],
    "ios": {
      "supportsTablet": true
    },
    "android": {
      "package": "com.liors.lottery.first.project",
      "versionCode": 3,
      "adaptiveIcon": {
        "foregroundImage": "./assets/lottery-background.png",
        "backgroundColor": "#FFFFFF"
      }
    },
    "web": {
      "favicon": "./assets/favicon.png"
    },
    "extra": {
      "eas": {
        "projectId": "292e68aa-3480-4c01-b697-6672a8d899fc"
      }
    }
  }
}

针对两个库的错误逐一解决 #

1. react-native-image-picker 报错：TypeError: null is not an object (evaluating ‘nativeImagePicler.launchImageLibrary’) #

• 原因：react-native-image-picker是纯原生模块，在Expo Managed项目中必须通过EAS Build构建才能正常使用，直接用Expo Go测试会出现原生链接失败问题；且该库与Expo生态兼容性较差，不适合你的项目。
• 解决：放弃使用react-native-image-picker，专注修复官方适配的expo-image-picker。

2. expo-image-picker 报错：TypeError: undefined is not an object (evaluating ‘result.assets[0]’) #

除修复上述配置错误外，还需检查以下几点：

• 权限请求处理：调用图片选择器前必须先请求权限，且要处理用户拒绝、取消的情况，避免直接访问不存在的assets属性。示例代码：

import * as ImagePicker from 'expo-image-picker';

const pickImage = async () => {
  // 请求相册权限
  const { status } = await ImagePicker.requestMediaLibraryPermissionsAsync();
  if (status !== 'granted') {
    alert('需要获取相册权限才能使用该功能');
    return;
  }

  // 调用图片选择器
  const result = await ImagePicker.launchImageLibraryAsync({
    mediaTypes: ImagePicker.MediaTypeOptions.Images,
    allowsEditing: true,
    quality: 1,
  });

  // 先判断是否取消选择，再访问assets
  if (!result.canceled) {
    const selectedImageUri = result.assets[0].uri;
    // 后续业务逻辑
  }
};

• 版本兼容性：确保expo-image-picker版本与当前Expo SDK匹配，运行以下命令自动安装适配版本：

npx expo install expo-image-picker

• Proguard 混淆影响：你开启了enableProguardInReleaseBuilds，Proguard可能混淆了expo-image-picker的原生代码。可暂时关闭该选项测试，或添加Proguard规则（需查阅官方文档）：

[
  "expo-build-properties",
  {
    "android": {
      "enableProguardInReleaseBuilds": false
    }
  }
]

• 清除缓存：运行以下命令清除Expo缓存，避免旧配置残留：

npx expo start --clear

验证步骤 #

1. 保存修改后的app.json
2. 运行适配命令确保库版本正确
3. 清除缓存后重启项目
4. 若使用EAS Build，需重新提交构建测试

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