Nativescript：在iOS上显示软件键盘时如何折叠视图？答案

【问题标题】：Nativescript: how to collapse view when software keyboard is shown on iOS?Nativescript：在iOS上显示软件键盘时如何折叠视图？
【发布时间】：2016-11-02 09:44:08
【问题描述】：

我有一个聊天屏幕，当文本字段聚焦时，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>

【问题讨论】：

在答案中使用插件。默认情况下，iOS 不处理移动视图组件，这就是原生库存在的原因。 Android 通过您的应用清单中的设置来处理此问题，默认情况下应启用该设置以在显示软键盘时调整视图
好吧，我已经安装了插件，但是如何使用呢？现在，当软键盘向上滑动时，文本字段和按钮仍然隐藏。

标签： ios nativescript

【解决方案1】：

你可以使用这个为iOS制作的插件来防止键盘重叠视图

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

【讨论】：