![](/img/trans.png)
[英]Jest: Failed prop type: Invalid prop `source` supplied to `Image`, expected one of type [number]
[英]Failed %s type: %s%s, prop, Invalid prop `source` supplied to `Image`, expected one of type [number]
我正在尝试从节点后端检索数据和图像,一切都在检索但不是图像,它给了我一个 Invalid prop 错误
这是列表屏幕
function ListScreen(props) {
const [listing, setListing] = useState([]);
useEffect(() => {
loadlistings();
}, []);
const loadlistings = async () => {
const res = await listingApi.getListing();
setListing(res.data);
};
return (
<View styles={styles.container}>
<StatusBar styles="auto" />
<FlatList
data={listing}
keyExtractor={(item) => item._id}
renderItem={({ item }) => (
<ListItem
title={item.name} //working fine
subTitle={item.job} //working fine
name="email"
name2="phone"
image={item.image} //not working
/>
)}
/>
</View>
);
}
这个 ListItem 组件
function ListItem({ image, title, subTitle, name, name2 }) {
return (
<Pressable>
<View style={styles.container}>
{image && <Image style={styles.image} source={image} />}
<View style={styles.detailsContainer}>
<Text style={styles.title}> {title}</Text>
<Text style={styles.subTitle}> {subTitle}</Text>
{Icon && <Icon name={name} />}
{Icon && <Icon name={name2} />}
</View>
</View>
</Pressable>
);
}
这是来自后端的数据
{
"_id": "629b5670579b00cd931122e9",
"name": "Harry Potter",
"job": "BackEnd Developer",
"image": "http://192.168.1.40:4545/image/image1654347376236_922911498.jpg",
"__v": 0
},
{
"_id": "629b568a579b00cd931122eb",
"name": "John Wick",
"job": "Full Stack Developer",
"image": "http://192.168.1.40:4545/image/image1654347402595_708253593.jpg",
"__v": 0
}
请帮助那些坚持了几天的人
您必须通过将带有键uri
的对象传递给<Image />
的source
属性来提供图像 URI,例如:
<Image style={styles.image} source={{uri: image}} />
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.