React Native flexbox - 如何做百分比 ||列 ||响应式 ||网格等 [英] React native flexbox - how to do percentages || columns || responsive || grid etc

问题描述

在过去几周在 iOS 上使用 react native 之后，我似乎遇到了 flex 样式的一些缺点......特别是在涉及响应"行为时.

例如，假设您要创建一个包含卡片的视图(这些卡片的元数据来自 API).您希望卡片为视图宽度的 50% 减去边距 &填充，并在每个 2 后换行.

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

在 React Native 样式中似乎没有简单的方法可以做到这一点，而不使用 javascript 对数据进行某种预处理，以便正确显示样式.有没有人有什么建议?

解决方案

React Native 已经

After working with react native on iOS for the last couple of weeks, I seem to have come across some shortcomings of flex styling... Particularly when it comes to "responsive" behavior.

For instance, lets say you want to create a view that contains cards (the metadata for these cards comes from an API). You want the cards to be 50% of the view width minus the margin & padding, and to wrap after each 2.

The current implementation I have for this view splits the returned array into rows with 2 items. The list container has flex: 1, flexDirection: 'column, the rows have flex: 1 and then each card has flex: 1. The end result is each row has 2 columns which evenly take up half the view width.

It seems like there is no trivial way to do this in React Native styles, without using javascript to do some sort of pre-processing on the data so that it comes out styled correctly. Does anyone have any suggestions?

解决方案

React Native already has percentage support:

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

这篇关于React Native flexbox - 如何做百分比 ||列 ||响应式 ||网格等的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！