React Native：與柔性盒設備無關的正方形網格

如果用戶使用iPad或iPhone，我希望獨立顯示與正方形相同的網格，從而相應地增加正方形尺寸。React Native：與柔性盒設備無關的正方形網格

我不想檢測設備，並根據屏幕大小更改廣場的寬度和高度。是否可以只使用React Native的css flex功能？

2016-09-16 Ronnie

電流（0.33.0在寫作時）flexbox capabilities of React Native（使用flexDirection和flex）只能給你甚至寬度或高度，但不能同時在同一時間。你爲什麼不想用Dimensions來測量屏幕尺寸？

來源

2016-09-16 16:30:31 rclai

尺寸是我在做什麼，現在擴大了廣場，但在我看來，一個錯誤的方法來計算基於屏幕寬度和高度固定的尺寸。 – Ronnie

如果你看看我在@ kukkuz的回答中寫的評論，你可以嘗試使用0.34.0-rc中的'flexBasis'屬性，但看起來你仍然需要手動無論如何，測量寬度的33％減一些邊距。在這種情況下手動測量尺寸沒有任何問題，並且（大部分是本地）移動開發測量尺寸是非常普遍的做法。 – rclai

@Ronnie，你介意分享你如何進行測量的代碼？這可能是有一個更簡單的方法來進行計算。 – rclai

那麼有一個技巧，它可以讓你實際創建一個正方形網格使用flexbox - 也許你可以採用它來反應本機。

例：

.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盒在一排：

首先，我在一個包裝成多行的行創建了3盒一個flexbox - 改變這個來容納更多的盒子。（10px這裏是保證金的兩倍）。
這裏的訣竅是讓它們變成正方形 - 製作一個具有padding-bottom: 100%的僞inline-block元素。（如果你給在百分比填充/保證金，則始終對其採取的寬度）
```
.flexbox > *:before { 
    content: ''; 
    padding-bottom: 100%; 
    height: 100%; 
    display: inline-block; 
    vertical-align: middle; 
} 
```

讓我知道你對這個意見。謝謝！

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; 
 
}

<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>

來源

2016-09-16 18:06:34 kukkuz

看起來'flexBasis'最近被添加到React Native，但沒有記錄。你應該嘗試使用它，但是，我不確定如何模擬'calc（33.33％ - 10px）'，因爲'flexBasis'需要一個數字作爲道具。 – rclai

哦原來'flexBasis'是0.34.0-rc。 https://github.com/facebook/react-native/releases/tag/v0.34.0-rc.0 – rclai

好吧，不太瞭解'反應原生'...希望這個答案可以幫助你找到一種方法。 ..:) – kukkuz

React Native：與柔性盒設備無關的正方形網格

回答

相關問題