要求与道具不起作用。 "Invalid call at.."

Question

我不明白为什么这段代码不起作用。

const UserCard = props => {
return (
<View style={styles.card}>
<View style={{flex: 0.33}}>
<Image source={require(props.user.image)} style={{width: 100, height: 100}}/>
</View>
<View style={{flex: 0.66}}>
<Text>bb</Text>
</View>
</View>
);
}
const styles = StyleSheet.create({
card: {
flexDirection: 'row',
backgroundColor: 'green'
},
});

export default UserCard;

props.user.image = 'Assets/test/joan.jpg'

如果我输入图像：

<Image source={require('Assets/test/joan.jpg')} style={{width: 100, height: 100}}/>

这是有效的。

在资产中，我有名为资产的package.json，所以我可以使用绝对路径。

我已经测试了各种选项，但没有一个。

例如：

return (
const user_image = require(props.user.image);
... 
<Image source={user_image} style={{width: 100, height: 100}}/>
...

其他：

return (
const user_image = props.user.image;
... 
<Image source={require(user_image)} style={{width: 100, height: 100}}/>
...

或者使用 src 而不是源代码，但它不起作用......

我也测试它的变化const UserCard = props => {

为class UserCard extends React.Component {

还是一样...

请帮忙。

编辑：

具有对象用户的主屏幕

const users = [
{
"image" : "Assets/test/fernando.jpg",
"name" : "Fernando",
"description" : "General Manager",
},
{
"image" : "Assets/test/daniel.jpg",
"name" : "Daniel",
"description" : "CEO",
},
{
"image" : "Assets/test/joan.jpg",
"name" : "Joan",
"description" : "Manager",
},
];
class HomeScreen extends React.Component {
...
render() {
return (
<SafeAreaView style={styles.container}>
<ScrollView
style={styles.container}
contentContainerStyle={styles.contentContainer}>
{ typeof users === 'object' && users.length > 0 && (users.map((user, index) => {
return (
<View key={index} style={{flex: 1, backgroundColor: 'red'}}>
<UserCard user={user} />
</View>
)})
) }  
</ScrollView>
</SafeAreaView>
);
}

Answer 1

所以今天我遇到了这个问题 我的解决方案是而不是像这样将路径传递给需求

<Image source={require(props.user.image)} />

我是这样通过的

<Image source={props.user.image} />

我发送了这样的数据

const users = [
{
"image" : require("Assets/test/fernando.jpg"),
"name" : "Fernando",
"description" : "General Manager",
},

就像一个魅力。

Answer 2

这可以是其他解决方案。不要将图像路径从父组件发送到子组件。像这样发送图像本身：

<UserCard user={user} image={require('Assets/test/daniel.jpg')} />

并直接在子组件中使用它：

<Image source={props.image} style={{width: 100, height: 100}}/>