Nativescript:如何在iOS上显示软件键盘时折叠视图?

时间:2016-11-02 09:44:09

标签: ios nativescript

我有一个聊天屏幕,当文本区域聚焦时,iOS软键盘出现。它与视图和文本字段重叠,发送按钮被隐藏。有没有办法以外部GridView高度等于GridView高度 - 软键盘高度的方式折叠视图?这将允许所有元素可见。

这是我的xml布局:

<Page id="main"
  xmlns="http://www.nativescript.org/tns.xsd"
  navigatingTo="onNavigatingTo">

        <GridLayout rows="auto, auto, *, auto, auto">

            <!-- Title -->
            <Label text="{{ L('chat', 'title') }}" class="title title-bar" row="0"/>
            <StackLayout class="line" row="1"/>

            <ListView id="messagesList" items="{{ messages }}" separatorColor="transparent" row="2">
                <ListView.itemTemplate>
                    <GridLayout columns="auto * auto" class="chat-item">
                        <Label text="{{ getChatUserName(isUser) }}" class="chat-avatar"
                               col="{{ isUser ? '2' : '0' }}"/>
                        <Label text="{{ message }}"
                               class="{{ isUser ? 'chat-message chat-message-user' : 'chat-message' }}"
                               textWrap="true" col="1"/>
                    </GridLayout>
                </ListView.itemTemplate>
            </ListView>

            <TextField text="{{ messageToSend }}" hint="{{ L('chat', 'text_hint') }}" row="3" returnPress="{{ send }}"/>
            <Button text="{{ L('chat', 'send_btn') }}" class="footer-grey-button-wrapper footer-grey-button"
                    tap="{{ send }}" col="0" row="4"/>

        </GridLayout>

</Page>

1 个答案:

答案 0 :(得分:4)

您可以使用此iOS插件来防止键盘与视图重叠

https://www.npmjs.com/package/nativescript-iqkeyboardmanager