css - Flexbox：将子宽度设置为 80%，同时将 flex-direction 设置为父列上的列

Question

我正在开发一个 React Native 项目。容器的flexDirection设置为column，我希望孩子的宽度跨越父母的 80%。如果父母的flexDirection设置为，row我会将flex值设置为0.8并完成它。限制是

1. 我不能在孩子周围有一个额外的容器。
2. 我不能给孩子一个固定的像素宽度。

这是一个解决问题的游乐场。

Answer 1

我最近了解到，在 ReactNative 0.42 版之后，不仅支持宽度，还支持以下属性：

• padding
• margin
• width
• height
• minWidth
• minHeight
• maxWidth
• maxHeight
• flexBasis

如果您想在这里了解更多信息，这里有一个链接到添加了这个很棒的功能的实际提交。

我的问题的答案是只添加一个百分比宽度80% Here it is my original fiddle with the fix added。

Answer 2

您可以通过以下方式访问屏幕尺寸：

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

在您的顶级进口中；然后，在您的风格中使用：

child: {
   width: width*0.8
},
.
.
.