首页 文章

两列网格反应原生flexbox [重复]

提问于
浏览 次
0

这个问题在这里已有答案：

我正在尝试在本机中构建一个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％并出现在单个列中 . 怎么解决这个问题？

css react-native flexbox

1 回答

  • -1

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

    import {Dimensions} from 'react-native'

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

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

相关问题