有没有办法为 react-native Layout 设置纵横比？答案

【问题标题】：Is there any way to set aspect ratio for react-native Layout?有没有办法为 react-native Layout 设置纵横比？
【发布时间】：2019-08-11 20:44:13
【问题描述】：

我需要将布局高度设置为其宽度的 60%。 AbsoluteLayout/DockLayout/GridLayout/StackLayout/WrapLayout/FlexboxLayout 都可以吗？

关于如何实现这一点的任何建议？

【问题讨论】：

你必须计算它，layoutChanged事件让你找到布局的当前宽度和高度，然后你可以应用原始宽度的60%作为高度。
@Manoj 感谢您的快速回复。我会在最后尝试一下。如果您可以分享示例代码，请不胜感激。
但问题是 layoutChangedEvent 不会在 iOS 页面上触发 github.com/NativeScript/NativeScript/issues/7085
该问题仅在页面级别报告，而不是在布局级别。
@Manoj 当我在 RadListView 项目上尝试这个时，在 android 中它起作用了。但在 iOS 高度没有更新。有什么想法吗？

标签： typescript nativescript aspect-ratio

【解决方案1】：

监听layoutChanged 事件，然后测量宽度并应用计算出的高度。

XML

<GridLayout backgroundColor="red" layoutChanged="onLayoutChanged"></GridLayout>

export function onLayoutChanged(args: EventData) {
    const gridLayout = <GridLayout>args.object,
        height = (layout.toDeviceIndependentPixels(gridLayout.getMeasuredWidth()) / 100) * 60;

    gridLayout.off("layoutChanged");
    setTimeout(() => {
        gridLayout.height = height;
    });
}

Playground Sample

【讨论】：

成功了！非常感谢。