React Native Expo Image Picker无法显示图片问题求助

你的代码核心问题是错误使用了Expo Image Picker的返回结果属性，最新版本的Expo Image Picker中，多选返回的图片数组存储在result.assets而非result.selected中，导致images状态无法正确获取图片URI，进而无法渲染。

以下是具体修复步骤和修改后的完整代码：

关键修复点 #

• 将结果处理逻辑中的result.selected替换为result.assets，这是Expo Image Picker当前版本（SDK 49+）的标准返回属性
• 统一单选/多选的状态设置逻辑，无论是否多选，result.assets都会是包含图片对象的数组
• 用SafeAreaProvider包裹整个应用，确保布局在安全区域内（最佳实践）

修改后的代码 #

import * as ImagePicker from "expo-image-picker";
import React, { useState } from "react";
import {
    ActivityIndicator,
    Button,
    FlatList,
    Image,
    Text,
    View
} from "react-native";
import { SafeAreaProvider, SafeAreaView } from "react-native-safe-area-context";

export default function App() {
    const [images, setImages] = useState([]);
    const [isLoading, setIsLoading] = useState(false);

    const pickImages = async () => {
        setIsLoading(true);
        let result = await ImagePicker.launchImageLibraryAsync({
            mediaTypes: ImagePicker.MediaTypeOptions.Images,
            allowsMultipleSelection: true,
            selectionLimit: 10,
            aspect: [4, 3],
            quality: 1,
        });
        setIsLoading(false);
        console.log(result);
        
        // 修复：使用result.assets获取图片数组，统一处理单选/多选
        if (!result.canceled && result.assets) {
            setImages(result.assets);
        }
    };

    return (
        <SafeAreaProvider>
            <SafeAreaView style={{ flex: 1 }}>
                <FlatList
                    data={images}
                    renderItem={({ item }) => (
                        <Image
                            source={{ uri: item.uri }}
                            style={{ width: 100, height: 100, margin: 10 }}
                        />
                    )}
                    keyExtractor={(item) => item.uri}
                    contentContainerStyle={{ marginVertical: 50, paddingBottom: 50 }}
                    ListHeaderComponent={
                        isLoading ? (
                            <View style={{ alignItems: "center" }}>
                                <Text
                                    style={{ fontSize: 20, fontWeight: "bold", textAlign: "center" }}
                                >
                                    Loading...
                                </Text>
                                <ActivityIndicator size={"large"} />
                            </View>
                        ) : (
                            <Button title="Pick images" onPress={pickImages} />
                        )
                    }
                />
            </SafeAreaView>
        </SafeAreaProvider>
    );
}

额外说明 #

• 给Image组件添加了margin样式，让图片之间不会重叠，更容易查看
• 给加载状态的View添加了alignItems: "center"，让文字和加载指示器居中显示
• 确保SafeAreaView设置flex: 1，让FlatList占满可用空间

内容的提问来源于stack exchange，提问作者Naveen Prasanth K