点击上传图片按钮触发Expo ImagePicker废弃字段警告问题求助

问题分析 #

你遇到的两个警告核心是Expo ImagePicker在SDK 48版本后会彻底移除旧的返回字段：

• 即便你已经改用canceled替代cancelled，警告仍存在可能是因为还在使用废弃的uri字段，或是SDK过渡阶段的兼容日志提示
• uri字段已被废弃，必须通过assets数组访问选中资源（哪怕是单选场景，资源也会被包裹在数组中）

解决方案 #

修改PickImage函数，完全适配新的返回结构：

1. 保留!result.canceled判断是否取消选择
2. 从result.assets数组中获取第一个资源的uri（单选场景下数组长度为1）
3. 增加数组非空判断，避免潜在报错

修改后的完整代码 #

import React, { useEffect, useState } from 'react'
import { Alert, Button, Image, View, StyleSheet, Platform } from 'react-native'
import * as ImagePicker from 'expo-image-picker'
import Constants from 'expo-constants'

const Fine_Repair_Request = () => {
  const [image, setImage] = useState(null);

  useEffect(async () => {
    if (Platform.OS !== 'web') {
      const { status } = await ImagePicker.requestMediaLibraryPermissionsAsync();
      if (status !== 'granted') {
        alert('Permission denied')
      }
    }
  }, [])

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

    console.log(result)
    // 同时判断取消状态和assets数组非空
    if (!result.canceled && result.assets.length > 0) {
      // 从assets数组中获取第一个资源的uri
      setImage(result.assets[0].uri)
    }
  }

  return (
    <View style={styles.container}>
      <Button title="Upload Image" onPress={PickImage} />
      {image && <Image source={{ uri: image }} style={{ width: 200, height: 200 }} />}
    </View>
  )
}

export default Fine_Repair_Request;

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center'
  }
})

关键修改说明 #

• 废弃字段替换：移除对result.uri的直接访问，改用result.assets[0].uri获取图片地址
• 健壮性提升：增加result.assets.length > 0的判断，防止用户取消选择后数组为空导致的报错
• 警告消除：完全适配新的API结构后，两个废弃字段的警告都会消失

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