react native flexbox中的两列网格[重复]答案

【问题标题】：Two column grid in react native flexbox [duplicate]react native flexbox中的两列网格[重复]
【发布时间】：2017-09-10 13:32:05
【问题描述】：

我正在尝试在本机反应中构建一个 2 列网格。我有 4 个正方形，每个应该占据屏幕的一半宽度，在这种情况下总共有 2 列。

代码如下：

 let profileMetricsArray = [{
  title: localization.session_count,
  value: this.state.sessionCount
},
{
  title: localization.hours_used,
  value: this.state.hoursUsed
},
{
  title: localization.day_streak,
  value: this.state.dayStreak
},
{
  title: localization.session_count,
  value: this.state.sessionCount
}].map((item, i) => {
  return  <View style={globalStyle.profileMetrics}>

              <Text style={globalStyle.profieText}> {item.title}</Text>

              <Text style = {globalStyle.profileValues}> {item.value}  </Text>
            </View>
})

内部渲染函数

<View style={globalStyle.profileMetricsContainer}>
            {profileMetricsArray}
            </View>

样式：

profileMetricsContainer: {
  flexDirection:'row',
  justifyContent:'center',
  flex: 1
},
profileMetrics: {
  flex: 0.5,
  margin: 10,
  borderRadius: 10,
  paddingBottom: 20,
  backgroundColor: 'white'
},

但是，在上面的代码中，每个正方形占据了屏幕 25% 的宽度并出现在单个列中。如何解决这个问题？

【问题讨论】：

你需要flexWrap: 'wrap'在父节点上
@LGSon 已经尝试过了。它不起作用。内容实际上是包装好的。但即使使用 flex: 0.5 ，宽度也是 25%。

标签： css react-native flexbox

【解决方案1】：

您是否尝试过使用维度来计算网格项？这对我有用

import {Dimensions} from 'react-native'

const {width, height} = Dimensions.get('window')

const style = StyleSheet.create({
  gridItem: width/2
})

【讨论】：