Javascript React native flexbox-如何实现百分比| | |列| |响应| |网格等

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

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

我对该视图的当前实现将返回的数组拆分为包含2项的行。列表容器有

flex:1，flexDirection:“column

，行有

flex:1

，然后每个卡都有

flex:1

。最终结果是每行有2列，平均占据视图宽度的一半

---

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

使用flexbox可能有更好的方法来实现这一点，但我通常为视口宽度和视口高度定义“百分比”帮助程序

vw

和

vh

，以CSS视口大小度量单位命名：

import {Dimensions} from 'react-native';

function vw(percentageWidth) {
  return Dimensions.get('window').width * (percentageWidth / 100);
}

function vh(percentageHeight) {
  return Dimensions.get('window').height * (percentageHeight / 100);
}

要在网格中流动项目，然后可以计算项目的适当大小，考虑边距和视口大小：

const COLUMNS = 3;
const MARGIN = vw(1);
const SPACING = (COLUMNS + 1) / COLUMNS * MARGIN;

const grid = {
  flex: 1,
  flexWrap: 'wrap',
  flexDirection: 'row',
  justifyContent: 'flex-start'
};

const cell = {
  marginLeft: MARGIN,
  marginTop: MARGIN,
  width: vw(100) / COLUMNS - SPACING
}

return (
  <View style={grid}>
    {this.props.things.map(thing => <View style={cell} />)}
  </View>
)

const COLUMNS=3；
常数裕度=vw（1）；
常量间距=（列+1）/列*边距；
常数网格={
弹性：1，
flexWrap:“wrap”，
flexDirection:'行'，
justifyContent:“灵活启动”
};
常量单元格={
marginLeft:MARGIN，
marginTop:MARGIN，
宽度：vw（100）/立柱-间距
}
返回(
{this.props.things.map（thing=>）}
)

只有在项目数量已知且有限的情况下，才应使用此技术-对于任意数量的卡，出于性能原因，应使用

ListView

，并手动将数据集拆分为行。

var style=StyleSheet.create({
家长：{
宽度：“100%”，
flexDirection:'行'，
flexWrap:“wrap”
},
儿童：{
宽度：“48%”，
利润率：1%，
方面：1，
}
})

---

您可以使用justifyContent:“间距”

<View style={styles.feed}>
    <View style={styles.card} />
    <View style={styles.card} />
    <View style={styles.card} />
    <View style={styles.card} />
 </View>

feed: {
 flex: 1,
 flexDirection: 'row',
 flexWrap: 'wrap',
 padding: 16,
 justifyContent: 'space-between'  }


card: {
 backgroundColor: 'white',
 width: '48%',
 aspectRatio: 1,
 marginBottom: 16   }

提要：{
弹性：1，
flexDirection:'行'，
flexWrap:“wrap”，
填充：16，
justifyContent:'之间的空格'}
卡片：{
背景颜色：“白色”，
宽度：“48%”，
方面：1，
marginBottom:16}

---

您是否尝试了“flexWrap”？是的，但flexWrap仅在子项溢出时有效，只有在子项上指定了宽度属性时才能触发@尼斯-指定50%的宽度有什么问题？这不是你想要的吗？React-native@niceass中没有%的概念，我对这个问题很感兴趣，而且我一辈子都无法单独使用flexbox实现这一点。对于我们来说，我们已经使用尺寸来计算窗口宽度，然后可以轻松地使用50%的宽度，等等。我已经用一个工作示例设置了一个要点，说明了您想要什么，但无可否认，这比我希望的要详细得多。这就是它看起来的样子：这似乎是迄今为止最好的解决方案。感谢您分享@jevakallio。这种方法的问题是，如果您允许更改方向，它将不起作用。@Joon correct-我刚刚发布了一个库，可以更轻松地在横向和纵向方向上设置本地组件的样式：高度问题。高度不能降低

<View style={styles.feed}>
    <View style={styles.card} />
    <View style={styles.card} />
    <View style={styles.card} />
    <View style={styles.card} />
 </View>

feed: {
 flex: 1,
 flexDirection: 'row',
 flexWrap: 'wrap',
 padding: 16,
 justifyContent: 'space-between'  }


card: {
 backgroundColor: 'white',
 width: '48%',
 aspectRatio: 1,
 marginBottom: 16   }