已导入FlatList却报“Property 'Flatlist'不存在”错误求助

核心报错原因 #

你导入的组件是FlatList（大写字母L），但在JSX中使用的是<Flatlist>（小写字母l）。React Native组件名严格区分大小写，将<Flatlist>改为<FlatList>即可解决该报错。

代码中其他需要修复的问题 #

• data属性传值错误：当前传入的是状态更新函数setImage，应该传入存储图片数据的状态变量
• 多选图片处理错误：result.assets是数组类型，你只提取了第一个元素的uri，需要遍历数组保存所有选中图片的地址
• 初始状态不匹配：要存储多张图片，初始状态应设为空数组而非null

修正后的完整代码 #

import { StatusBar } from 'expo-status-bar';
import { StyleSheet, Text, View, Image, Button, FlatList } from 'react-native';
import { useState } from 'react';
import * as ImagePicker from 'expo-image-picker';

export default function ExpoImagePicker() {
  // 初始状态设为空数组，用于存储多张图片的uri
  const [images, setImages] = useState([]);

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

    console.log(result);

    if (!result.canceled) {
      // 提取所有选中图片的uri并更新状态
      const imageUris = result.assets.map(asset => asset.uri);
      setImages(imageUris);
    }
  };

  return (
    <FlatList
      contentContainerStyle={{ justifyContent: 'center', alignItems: 'center' }}
      horizontal
      data={images}
      renderItem={({ item }) => (
        <Image source={{ uri: item }} style={{ width: 280, height: 280, marginHorizontal: 10 }} />
      )}
      keyExtractor={(item, index) => index.toString()}
      ListFooterComponent={() => (
        <Button 
          title="Pick From Media Library" 
          onPress={pickImage} 
        />
      )}
    />
  );
}

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