React Native：设备独立的方格网格与flexbox

时间：2016-09-16 14:16:19

标签： reactjs react-native flexbox

如果用户有iPad或iPhone，我希望独立显示相同的方格，相应地增加方形尺寸。

我不想检测设备并根据屏幕大小更改方块的宽度和高度。 是否可以仅使用React Native的css flex功能？

Grid Example

在这里 rnplay example

3 个答案:

答案 0 :(得分：1)

当前（写作时为0.33.0）flexbox capabilities of React Native（使用flexDirection和flex）只能为您提供均匀的宽度或高度，但不能同时为两者。为什么不想使用Dimensions来衡量屏幕尺寸？

答案 1 :(得分：1)

有一个技巧可以让你使用flexbox实际创建一个方格网格 - 也许你可以将它用于React Native。

示例：

  1. 首先，我创建了一个flexbox，其中包含3个框，包含在多行中：

    .flexbox {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
}
.flexbox > * {
  margin: 5px;
  text-align: center;
  border: 1px solid red;
  flex-basis: calc(33.33% - 10px);
}

    注意flex-basis: calc(33.33% - 10px)允许连续保留3个框 - 更改此框以容纳更多框。 （10px这是保证金的两倍。

  2. 这就是使它们成为正方形的技巧 - 制作一个具有inline-block的伪padding-bottom: 100%元素。 （如果以百分比给出填充/边距，则总是相对于宽度）

    .flexbox > *:before {
  content: '';
  padding-bottom: 100%;
  height: 100%;
  display: inline-block;
  vertical-align: middle;
}

    3. 让我知道您对此的反馈。谢谢！

    ＆＃13;
    ＆＃13; 
    body {
  padding: 0;
  margin: 0;
}
* {
  box-sizing: border-box;
}
.flexbox {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
}
.flexbox > * {
  margin: 5px;
  text-align: center;
  border: 1px solid red;
  flex-basis: calc(33.33% - 10px);
}
.flexbox > *:before {
  content: '';
  padding-bottom: 100%;
  height: 100%;
  display: inline-block;
  vertical-align: middle;
}
    ＆＃13; 
    <body>
  <div class="flexbox">
    <div>some text here</div>
    <div>some text here</div>
    <div>some text here</div>
    <div>some text here</div>
    <div>some text here</div>
    <div>some text here</div>
    <div>some text here</div>
    <div>some text here</div>
  </div>
</body>
    ＆＃13;
    ＆＃13;
    ＆＃13;

答案 2 :(得分：0)

折腾

aspectRatio: 1

如果使用flex: 1设置了宽度或高度，则使用组件样式，它将为您生成另一个值！

相关问题
最新问题