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}
                    />)}