React-Native 使用 FlatList 渲染卡片組件不起作用

Question

我是 React-Native 的新手，我想使用來自外部文件的不同 json 數據渲染卡組件。 我沒有看到的問題是卡片組件圖像沒有顯示並且卡片組件沒有堆疊在一起。 這就是我到目前為止所擁有的。 卡片組件正在通過它的父組件 Recipie 呈現。

以下是父組件接收方

import RecipieData from '../Data/Data'

const Recipies = () => {
    return (
        <View style={styles.background}>
            <View style={styles.cards}>
                <FlatList
                    style={{height: '100%'},{width:"100%"}}
                    data={RecipieData}
                    keyExtractor={item => item.id}
                    renderItem={({ item }) => 
                        
                        <Card
                            image={item.photo}
                            title={item.name}
                            time={item.time}
                        />
                        }
                />
            </View>
            
            
        </View>
    )
}

export default Recipies

const styles = StyleSheet.create({
    background:{
        backgroundColor:'#F2F2F2',
        height: "100%",
        flex: 1,
    },
    cards:{
        marginHorizontal:20,
        marginVertical:30,
        
    }
})
`

這是子組件卡

const Card = (props) => {
    return (
        
        <View style={styles.card}>
            <LikeButton/>
            <Image style={styles.image} source={{uri: props.image}}/>
            
            <Text style={styles.title}>{props.title}</Text>
            <Text style={styles.time}>{props.time}</Text>
        </View>
            
        
    )
}

export default Card

const styles = StyleSheet.create({
    
    card:{
        marginVertical:15,
        width:'100%',
        borderRadius:35,
        backgroundColor:'black',

    },
    image:{
        marginLeft:0,
        padding:0,
        width:'100%',
        height:'100%',
        borderRadius:30,
        position:'relative',
        opacity:0.65
    },
    title:{
        position:'absolute',
        marginTop:65,
        marginBottom:0,
        marginHorizontal:20,
        fontSize: 30,
        color:'white',
        fontWeight:'bold'

    }, time:{
        width:'20%',
        textAlign:'center',
        marginVertical: 20,
        position:'absolute',
        backgroundColor: Colors.green,
        color:'white',
        fontSize: 25,
        fontWeight:'bold',
        bottom:0,
        borderRadius:20,
        marginLeft: 20
    }
})

我什么都試過了。 我真的在嘗試使用名為 RecipieData 的外部 json 文件中的道具將卡片組件堆疊在列視圖中。 請有人幫助我，將不勝感激！！！！

Answer 1

你可以試試這張cards:{ marginHorizontal:20, marginVertical:30, flex: 1 }

Answer 2

renderItem 應該返回一個組件。使用這個

renderItem={({ item }) => 
             return(<Card
                        image={item.photo}
                        title={item.name}
                        time={item.time}
                    />)}