Question

我试图在本地反应中构建一个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％并出现在单个列中。如何解决这个问题？

Answer 1

您是否尝试使用Dimensions计算网格项？这项工作对我来说

＆＃13;

FileDialog

＆＃13;

两列网格反应原生flexbox

1 个答案: