FlatList React本机不显示图像

wwwo4jvm  于 2023-02-05  发布在  React
关注(0)|答案(1)|浏览(168)

我尝试使用平面列表为我的expoReact本地应用程序。我决定保存我的图像在本地文件夹中显示在主页上。然而,我得到下面的错误信息,我真的不明白我哪里出错了。
错误消息为:"第行的无效调用{有关第行,请参见下面的***}"

const Inspiration = () => {

    const handleSelectedImage = (e) => {
        console.log('image selected', e);
    };
    return (
        <>
            <CreatedImageModal />
            <ModalGeneratingImage />
            <ExamplePrompt />
            <FlatList
                contentContainerStyle={{ flexGrow: 1 }}
                data={EXAMPLES}
                style={styles.list}
                numColumns={2}
                keyExtractor={(item) => item.id}
                ListHeaderComponent={<Prompt />}

                renderItem={({ item }) => (
                    <Image
                        source={require(item.id)} // ***
                        onPress={() => handleSelectedImage(item)}
                        transition={true}
                        containerStyle={styles.item}
                        PlaceholderContent={<ActivityIndicator />}
                    />
                )}
            />
        </>
    );
};

const styles = StyleSheet.create({
    list: {
        width: '100%',
        backgroundColor: '#000',

    },
    item: {
        aspectRatio: 1,
        width: '100%',
        flex: 1,
    },
});

const EXAMPLES = [
    {
        id: '../assets/img-1.png',
        prompt: 'A synthwave style sunset above the reflecting water of the sea, digital art'
    },
    {
        id: '../assets/img-2.png',
        prompt: 'A van Gogh style painting of an American football player'
    },
    {
        id: '../assets/img-3.png',
        prompt: '3D render of a cute tropical fish in an aquarium on a dark blue background, digital art'
    },
    {
        id: '../assets/img-4.png',
        prompt: 'A cartoon of a cat catching a mouse'
    },
    {
        id: '../assets/img-5.png',
        prompt: 'A comic book cover of a superhero wearing headphones'
    },
    {
        id: '../assets/img-6.png',
        prompt: 'A hand-drawn sailboat circled by birds on the sea at sunrise'
    },
    {
        id: '../assets/img-7.png',
        prompt: 'An expressive oil painting of a basketball player dunking, depicted as an explosion of a nebula'
    },
    {
        id: '../assets/img-8.png',
        prompt: 'A hand drawn sketch of a Porsche 911'
    },
    {
        id: '../assets/img-9.png',
        prompt: 'A sea otter with a pearl earring" by Johannes Vermeer'
    },

];

export default Inspiration;
4jb9z9bj

4jb9z9bj1#

尝试按如下所示更改EXAMPLESImage组件:

<Image
  source={item.id}
  onPress={() => handleSelectedImage(item)}
  transition={true}
  containerStyle={styles.item}
  PlaceholderContent={<ActivityIndicator />}
 />
const EXAMPLES = [
    {
        id: require('../assets/img-1.png'),
        prompt: 'A synthwave style sunset above the reflecting water of the sea, digital art'
    },
...
]

您需要向数据中添加require,而不是Image组件。

相关问题