Question

我是React-Native的新手，我想使用来自外部文件的不同json数据渲染Card组件。我看不到的问题是卡组件图像未显示，并且卡组件未堆叠在一起。这是我到目前为止所拥有的。卡组件通过其父组件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}
                    />)}

React-Native使用FlatList渲染Card组件不起作用

2 个答案: