【问题标题】:NativeScript iPhone X place content in safe areaNativeScript iPhone X 将内容放在安全区域
【发布时间】:2018-08-27 15:38:02
【问题描述】:

是否可以在 iPhoneX 的(底部)放置区域内放置内容,在我的例子中是一个按钮?

这就是现在的样子。

为了更好地理解这里是我的 HTML。 据我了解,Apple 无法将任何内容插入到除了滚动视图之外的安全区域。

HTML

<FlexboxLayout flexDirection="column"
               justifyContent="space-between"
               alignContent="center"
               alignItems="center"
               class="transparentBackground"
               height="100%">
    <FlexboxLayout justifyContent="flex-end"
                   alignItems="center"
                   flexDirection="row"
                   class="action-bar">
        <Label *ngIf="isAdmin"
               text="&#xf086;"
               class="font-awesome action-bar-item"
               (tap)="onAdminPush()"></Label>
        <Label text="&#xf039;"
               class="font-awesome action-bar-item"
               (tap)="onAppointments()"></Label>
    </FlexboxLayout>
    <AbsoluteLayout width="350"
                    height="350"
                    (tap)="onStartAppointment()">
        <Image stretch="aspectFill"
               borderColor="gray"
               borderWidth="1"
               borderRadius="200"
               width="350"
               height="350"
               src="~/Assets/Imgs/terminanfrage.png"></Image>
        <FlexboxLayout alignItems="center"
                       justifyContent="center"
                       width="100%"
                       height="100%"
                       style="color:black;">
            <Label text="Terminanfrage"
                   class="label--appointment font-title-rrm"></Label>
        </FlexboxLayout>
    </AbsoluteLayout>
    <Button class="btn btn-primary call_button font-title-rrm"      
            id="button"
            text="Im Büro anrufen"
            (tap)="onCallOffice()"></Button>
</FlexboxLayout>

【问题讨论】:

    标签: nativescript angular2-nativescript iphone-x


    【解决方案1】:

    这取决于您的 HTML 的外观,但如果您有一个占据整个页面的 GridLayout,您可以在其中一个孩子上设置 verticalAlignment="bottom"

    编辑:我对此发表了评论,但内容并没有按照我希望的方式进行格式化。要测试是否可以将某些东西放入安全区,请尝试这样做:

    <GridLayout rows="* 50" height="100%" width="100%" backgroundColor="blue">
        <Button row="1" text="test" backgroundColor="red" verticalAlignment="bottom"></Button>
    </GridLayout>
    

    【讨论】:

    • 我已经用我的 HTML 更新了我的问题。如果我将它放在按钮上,verticalAlignment="bottom" 似乎不起作用。
    • 我对@9​​87654323@ 不是很熟悉,但您的问题可能源于justifyContent="space-between"。如果您想试验是否可以将内容放入安全区域,请尝试以下操作:
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2018-04-28
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2018-03-02
    • 2018-08-23
    相关资源
    最近更新 更多