React-Native 使用 FlatList 渲染卡片组件不起作用答案

【问题标题】：React-Native render a Card Component using FlatList not workingReact-Native 使用 FlatList 渲染卡片组件不起作用
【发布时间】：2020-10-19 21:51:24
【问题描述】：

我是 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 文件中的道具堆叠在一个列视图中。请有人帮助我，将不胜感激！！！！

【问题讨论】：

您好，看来这可能是 flexbox 的问题。如果您希望它们排成一排，然后换行，您可以在您的食谱组件中指定它。此外，您可以使用水平/列设置：reactnative.dev/docs/flatlist#numcolumns

标签： javascript reactjs react-native react-native-flatlist react-native-elements

【解决方案1】：

你可以试试这个 cards:{ marginHorizontal:20, marginVertical:30, flex : 1 }

【讨论】：

你没有在 Recipies 上给卡片样式提供弹性（对不起，我的英语不好，我希望能帮助你）
欢迎。如果您有其他信息要添加到自己的帖子中，最好进行编辑，而不是将其添加到 cmets 部分。如果您再次意识到这不是一个正确的答案，您可以删除该帖子。此外，要知道在 SO 上不鼓励仅使用代码的答案，不太可能被赞成，因为它们的长期价值，以及从没有上下文或解释的原始代码中学习的机会限制了未来访问者轻松学习和应用的学习机会知识到自己的代码。

【解决方案2】：

renderItem 应该返回一个组件。使用这个

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

【讨论】：