React Native Flexbox-如何做百分比|| 列|| 响应|| 网格等

小编典典

React Native Flexbox-如何做百分比|| 列|| 响应|| 网格等

reactjs

在过去几周与iOS上的react native一起工作之后，我似乎遇到了Flex样式的一些缺点……尤其是涉及“响应式”行为时。

例如，假设您要创建一个包含卡片的视图（这些卡片的元数据来自API）。您希望这些卡的宽度为视图宽度的50％减去边距和填充，并在每2张后包裹。

我对此视图的当前实现将返回的数组拆分为包含2个项目的行。列表容器有flex: 1, flexDirection: 'column，行有flex: 1，每张卡有flex: 1。最终结果是每行有2列，平均占据视图宽度的一半。

在React Native样式中，似乎似乎没有任何简单的方法可以实现，而无需使用javascript对数据进行某种预处理以使其样式正确。有没有人有什么建议？

阅读 433

2020-07-22

共1个答案

小编典典

React Native已经有百分比支持：

<View style={[style.parent]}>
    <View style={[style.child, {backgroundColor: '#996666'} ]} />
    <View style={[style.child, {backgroundColor: '#339966'} ]} />
    <View style={[style.child, {backgroundColor: '#996633'} ]} />
    <View style={[style.child, {backgroundColor: '#669933'} ]} />
</View>

var style = StyleSheet.create({
    parent: {
        width: '100%', 
        flexDirection: 'row', 
        flexWrap: 'wrap'
    },
    child: {
        width: '48%', 
        margin: '1%', 
        aspectRatio: 1,
    }
})

2020-07-22