Flexbox：将 child 宽度设置为 80%，而 flex-direction 设置为 parent 上的列

Question

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

1. 我无法在 child 周围放置额外的容器。
2. 我不能给 child 一个固定的像素宽度。

这是一个 playground 到 fiddle 的问题。

Answer 1

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

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

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

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

Answer 2

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

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

如果您想了解更多信息，请点击此处 link 添加此出色功能的实际提交。

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