我尝试使用平面列表为我的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;
1条答案
按热度按时间4jb9z9bj1#
尝试按如下所示更改
EXAMPLES
和Image
组件:您需要向数据中添加
require
,而不是Image组件。