react-native - 我如何根据卡片内容使其砖石网格反应原生

Question

renderMenuCard = (item) => {
        return (
            <View style={{width: DEVICE_WIDTH/2-moderateScale(22), backgroundColor: '#eee', padding: moderateScale(15), paddingVertical: moderateScale(25), borderRadius: moderateScale(10), marginBottom: moderateScale(15)}}>
                <View style={{height: moderateScale(30), width: moderateScale(30), borderRadius: moderateScale(15), backgroundColor: '#ddd', marginBottom: moderateScale(10)}}></View>
                <View style={{backgroundColor: 'transparent', flexWrap: 'wrap', alignItems: 'center'}}>
                    <Txt medium>{item.name}</Txt>
                </View>
            </View>
        )
    }



<FlatList
     contentContainerStyle={{flexDirection: 'row', flexWrap: 'wrap', justifyContent: 'space- 
     between'}}
     data={this.state.menu_card}
     renderItem={({item}) => (
     this.renderMenuCard(item))}
/>

我希望该网格看起来像砖石结构，如何在不使用 react-native-masonry 库的情况下实现该布局

我得到的结果

标签： react-native