如何将图像作为道具传递给自定义组件？

Question

我在搜索屏幕上有一个自定义组件和平面列表，我试图将每个结果加载到该自定义组件中。平面列表中的数据是对象的数组，是API的响应。当我将图像，名称和其他详细信息传递给自定义组件以显示在卡上时，只有样式加载时没有任何数据。

这是我的代码

Card.js：

    const Card = (props) => {
    return (
        <View style={styles.containerStyle}>

                    <View>
                        <Image
                            source = {{uri : props.source}}
                            style={{ borderRadius: 100, width: 80, height: 80, margin: 10 }}
                        />
                    </View>
                    <View style={{ marginLeft: 15, margin: 10 }}>
                        <Text>{props.name}</Text>
                        {/* <Text>{props.cuisine}</Text>
                        <Text>{props.cost}</Text> */}
                    </View>
        </View>
    )
}

Main.js：

<FlatList
    data={this.state.data}
    keyExtractor={(x, i) => x + i}
    renderItem={({ item }) => 
              <Card 
                 source = {item.thumb} 
                 name = {item.name}    
              />
     }
/>

图像更加清晰