Expo与React Native图片选择报错问题求助

错误分析与修复方案 #

1. 模拟器中「文件写入失败」错误 #

该错误多因旧版API与当前Expo环境不兼容、缺少权限请求，或allowsEditing选项引发临时文件路径异常导致。

2. iPhone Expo应用中「result.assets[0] 未定义」错误 #

核心原因是你使用了旧版返回值判断逻辑，新版Expo ImagePicker的launchImageLibraryAsync返回结构已变更：

• 旧版：返回{ cancelled, uri }
• 新版：返回{ canceled, assets }（注意拼写为canceled而非cancelled，图片信息存储在assets数组内）

完整修复代码 #

import React, { useState, useEffect } from "react";
import { StatusBar } from "expo-status-bar";
import {
  KeyboardAvoidingView,
  StyleSheet,
  Text,
  View,
  Image,
  Dimensions,
  TouchableOpacity,
  ActivityIndicator,
} from "react-native";
import * as ImagePicker from "expo-image-picker";
import { LinearGradient } from "expo-linear-gradient";

const { height } = Dimensions.get("window");

export default function OnboardAddImages({ navigation }) {
  const [image, setImage] = useState(null);
  const [isLoading, setIsLoading] = useState(false);

  // 组件挂载时请求媒体库权限
  useEffect(() => {
    (async () => {
      const { status } = await ImagePicker.requestMediaLibraryPermissionsAsync();
      if (status !== "granted") {
        alert("需要授予媒体库权限才能选择图片");
      }
    })();
  }, []);

  const pickImage = async () => {
    setIsLoading(true);
    try {
      let result = await ImagePicker.launchImageLibraryAsync({
        mediaTypes: ImagePicker.MediaTypeOptions.All,
        allowsEditing: true,
        aspect: [4, 3],
        quality: 1,
        // 明确设置临时文件选项，解决模拟器写入异常
        base64: false,
        exif: false,
      });

      console.log(result);

      // 适配新版API的判断逻辑
      if (!result.canceled && result.assets.length > 0) {
        setImage(result.assets[0].uri);
      } else {
        setImage(null);
      }
    } catch (error) {
      console.log("Error while picking image:", error);
      alert("选择图片失败：" + error.message);
    } finally {
      // 直接结束加载，移除不必要的延迟
      setIsLoading(false);
    }
  };

  return (
    <LinearGradient
      colors={["#A1DDFF", "#FFE3B9", "#FECBFF"]}
      style={styles.container}
    >
      <View style={styles.header}>
        <TouchableOpacity onPress={() => navigation.goBack()}>
          <Image
            source={require("../assets/BackArrow.png")}
            style={styles.backarrow}
          />
        </TouchableOpacity>
      </View>
      <View style={styles.content}>
        <View
          style={{ flex: 1, justifyContent: "center", alignItems: "center" }}
        >
          {!image ? (
            <>
              <TouchableOpacity
                onPress={pickImage}
                style={{
                  borderStyle: "dashed",
                  borderWidth: 1,
                  borderColor: "#000000",
                  padding: 10,
                }}
              >
                {isLoading ? (
                  <ActivityIndicator color={"#ff0000"} animating size={"large"} />
                ) : (
                  <Text>Pick a image</Text>
                )}
              </TouchableOpacity>
            </>
          ) : (
            <View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
              <Image source={{ uri: image }} style={{ width: 200, height: 200 }} />
            </View>
          )}
        </View>
      </View>
      <View style={styles.buttonContainer}>
        <TouchableOpacity
          style={styles.button}
          onPress={() => navigation.navigate("NextPage")}
        >
          <Image
            source={require("../assets/frontarrow.png")}
            style={styles.frontarrow}
          />
        </TouchableOpacity>
      </View>

      <StatusBar style="auto" />
    </LinearGradient>
  );
}

// 补充样式定义
const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  header: {
    paddingTop: 40,
    paddingLeft: 20,
  },
  backarrow: {
    width: 24,
    height: 24,
  },
  content: {
    flex: 1,
    paddingHorizontal: 20,
  },
  buttonContainer: {
    paddingBottom: 40,
    alignItems: "flex-end",
    paddingRight: 20,
  },
  frontarrow: {
    width: 30,
    height: 30,
  },
});

额外注意事项 #

• 确保expo-image-picker与expo版本兼容，建议更新到最新稳定版：npx expo install expo-image-picker
• 模拟器中若仍出现文件写入错误，可尝试关闭allowsEditing选项，或重启Expo服务与模拟器
• iOS物理设备需确保Expo App为最新版本，且已授予应用媒体库权限

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