时间戳

首页 > 解决方案 > 有没有办法为 react-native Layout 设置纵横比？

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

问题描述

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

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

标签： typescriptnativescriptaspect-ratio

解决方案

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

XML

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

TS

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

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

游乐场样本

推荐阅读