Expo React Native中expo-image-picker的requestMediaLibraryPermissionsAsync未定义问题

错误提示：

Cannot read property 'requestMediaLibraryPermissionsAsync' of undefined

相关代码 #

const pickImage = async () => {
    const {status} = await ImagePicker.requestMediaLibraryPermissionsAsync()

    if (status !== 'granted') {
      alert('Sorry, we need camera roll permissions to make this work!')
      return
    }

    let result = await ImagePicker.launchImageLibraryAsync({
      mediaTypes: ImagePicker.MediaTypeOptions.All,
      allowsEditing: true,
      aspect: [4, 3],
      quality: 1,
    })

    if (!result.cancelled) {
      const source = {uri: result.uri}
      uploadImage(source.uri)
    }
}

导入语句 #

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

项目配置 #

expo-env-info 1.0.5 environment info:
    System:
      OS: macOS 13.5.1
      Shell: 5.9 - /bin/zsh
    Binaries:
      Node: 18.17.1 - /usr/local/bin/node
      npm: 8.19.4 - ~/node_modules/.bin/npm
      Watchman: 2023.09.04.00 - /opt/homebrew/bin/watchman
    IDEs:
      Android Studio: 2022.3 AI-223.8836.35.2231.10671973
      Xcode: /undefined - /usr/bin/xcodebuild
    npmPackages:
      expo: ~49.0.8 => 49.0.9 
      metro: ^0.79.0 => 0.79.0 
      react: 18.2.0 => 18.2.0 
      react-native: 0.72.4 => 0.72.4 
    npmGlobalPackages:
      eas-cli: 5.2.0
      expo-cli: 6.3.10
    Expo Workflow: managed

已尝试的排查操作 #

• 验证expo-image-picker是否正确安装
• 确认ImagePicker导入语句无误
• 重启Expo客户端并清除缓存

业务需求 #

• 点击头像的笔形图标时，能唤起手机媒体库以上传新图片

问题分析与解决方法 #

原因分析 #

1. API版本不兼容：Expo SDK 49对应的expo-image-picker已移除requestMediaLibraryPermissionsAsync方法，该API在SDK 48+版本中被调整，无需手动调用权限请求，或需通过expo-media-library处理权限。
2. 返回结构变更：SDK 49中launchImageLibraryAsync的返回值结构也有更新，原result.cancelled改为result.canceled，图片信息存储在assets数组中。

解决方法 #

方法一：适配SDK 49自动权限请求（推荐）

expo-image-picker在SDK 49中会自动处理权限请求，直接移除手动权限代码即可：

const pickImage = async () => {
    let result = await ImagePicker.launchImageLibraryAsync({
      mediaTypes: ImagePicker.MediaTypeOptions.All,
      allowsEditing: true,
      aspect: [4, 3],
      quality: 1,
    })

    if (result.canceled) {
      return;
    }

    const source = {uri: result.assets[0].uri}
    uploadImage(source.uri)
}

方法二：手动管理权限（如需自定义提示）

若需手动控制权限逻辑，需安装expo-media-library：

1. 安装依赖：

npx expo install expo-media-library

2. 修改代码：

import * as MediaLibrary from 'expo-media-library';
import * as ImagePicker from 'expo-image-picker';

const pickImage = async () => {
    const {status} = await MediaLibrary.requestPermissionsAsync();

    if (status !== 'granted') {
      alert('Sorry, we need camera roll permissions to make this work!')
      return
    }

    let result = await ImagePicker.launchImageLibraryAsync({
      mediaTypes: ImagePicker.MediaTypeOptions.All,
      allowsEditing: true,
      aspect: [4, 3],
      quality: 1,
    })

    if (result.canceled) {
      return;
    }

    const source = {uri: result.assets[0].uri}
    uploadImage(source.uri)
}

方法三：同步依赖版本

确保expo-image-picker与SDK 49兼容，执行更新命令：

npx expo install expo-image-picker@~14.3.2

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