javascript - React native flexbox - 如何做百分比 ||列 ||响应 ||网格等

Question

在过去几周在 iOS 上使用 React Native 之后，我似乎发现了 Flex 样式的一些缺点……尤其是在“响应式”行为方面。

例如，假设您要创建一个包含卡片的 View (这些卡片的元数据来自 API)。您希望卡片占 View 宽度的 50% 减去边距和填充，并在每 2 个之后换行。

我对此 View 的当前实现将返回的数组拆分为包含 2 个元素的行。列表容器有 flex: 1, flexDirection: 'column，行有 flex: 1 然后每张卡片都有 flex: 1。最终结果是每行有 2 列，平均占据 View 宽度的一半。

似乎没有简单的方法可以在 React Native 样式中执行此操作，无需使用 javascript 对数据进行某种预处理以使其具有正确的样式。有没有人有什么建议？

Answer 1

使用 flexbox 可能有更好的方法来实现这一点，但我通常为视口(viewport)宽度和视口(viewport)高度定义“百分比”助手 vw 和 vh，以CSS 视口(viewport)尺寸测量单位:

import {Dimensions} from 'react-native';

function vw(percentageWidth) {
  return Dimensions.get('window').width * (percentageWidth / 100);
}

function vh(percentageHeight) {
  return Dimensions.get('window').height * (percentageHeight / 100);
}

要在网格中流动元素，您可以计算元素的适当大小，考虑边距和视口(viewport)大小:

const COLUMNS = 3;
const MARGIN = vw(1);
const SPACING = (COLUMNS + 1) / COLUMNS * MARGIN;

const grid = {
  flex: 1,
  flexWrap: 'wrap',
  flexDirection: 'row',
  justifyContent: 'flex-start'
};

const cell = {
  marginLeft: MARGIN,
  marginTop: MARGIN,
  width: vw(100) / COLUMNS - SPACING
}

return (
  <View style={grid}>
    {this.props.things.map(thing => <View style={cell} />)}
  </View>
)

只有当您的元素数量已知且数量有限时，才应使用此技术 - 对于任意数量的卡片，出于性能原因，您应该使用 ListView，并手动将数据集拆分为行。