Flexbox：将子宽度设置为80％，而父对象的flex-direction设置为列

Question

我正在研究React Native项目。容器的flexDirection设置为column，我希望孩子的宽度超过父级的80％。如果父级flexDirection设置为row，我会将flex值设置为0.8并完成。{限制是

1. 我不能在孩子周围设置额外的容器。
2. 我无法给孩子一个固定的宽度（以像素为单位）。

这是一个解决问题的playground。

Answer 1

我最近了解到，在ReactNative版本0.42之后，支持百分比单位，不仅仅是宽度，还有以下属性：

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

如果您想了解更多信息，请在实际提交中link添加此功能。

我的问题的答案是只添加80%的百分比宽度 这是我原来的fiddle添加了修复程序。

Answer 2

您可以使用以下方式访问屏幕尺寸：

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

在您的顶级进口;那么，在你的风格中使用：

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