1

我在 Nativescript 中创建了一个聊天 UI 界面，几乎一切正常，但我在 iOS 中遇到了一些我无法弄清楚的问题。Android 中的一切都正常工作。

问题1：

  • 当我专注于 TextView 并且键盘打开时，我无法再滚动到聊天顶部。所有内容似乎都向上移动（即使没有足够有趣地使用IQKeyboardManager ）。

问题2：

  • 当我开始在 TextView 中输入时，它会立即转移到屏幕底部，隐藏在键盘后面，我看不到我在输入什么。

这是我在 Playground 上创建的一个演示项目，它显示了这个问题。游乐场演示项目

下面是显示这两个问题的 GIF。

任何帮助表示赞赏。谢谢！

聊天界面演示

4

2 回答 2

3

问题1：

这是因为 IQKeyboardManager 在 ViewController (Page) 之上托管了一个 ScrollView，而 RadListView 有自己的可滚动区域。解决方案是在键盘处于活动状态时调整插图。

下面的代码获取键盘高度，并在首次显示时将其缓存在应用程序对象中。

import * as application from "@nativescript/core/application";

let observer = application.ios.addNotificationObserver(
    UIKeyboardDidShowNotification,
    notification => {
        application.ios.removeNotificationObserver(
            observer,
            UIKeyboardDidShowNotification
        );
        (application as any)._keyboardHeight = notification.userInfo.valueForKey(
            UIKeyboardFrameBeginUserInfoKey
        ).CGRectValue.size.height;
    }
);

当文本字段聚焦时，调整列表视图的插图

textFieldFocus() {
        console.log("Focus on TextField");
        (this
            .radList as any)._originalContentInset = this.radList.ios.contentInset;
        if ((application as any)._keyboardHeight) {
            this.radList.ios.contentInset = UIEdgeInsetsMake(
                (application as any)._keyboardHeight,
                0,
                0,
                0
            );
        } else {
            setTimeout(() => this.textFieldFocus(), 100);
        }
    }

问题2：

这是因为文本视图会在文本更新时自行布局。防止这种情况可能会保持滚动位置不变。下面的覆盖检查字段是否聚焦并忽略布局调用。

import { TextView } from "@nativescript/core/ui/text-view";

TextView.prototype.requestLayout = function() {
    if (
        !arguments[0] &&
        this.nativeViewProtected &&
        this.nativeViewProtected.isFirstResponder
    ) {
        this.nativeViewProtected.setNeedsLayout();
        IQKeyboardManager.sharedManager().reloadLayoutIfNeeded();
    } else {
        View.prototype.requestLayout.call(this);
    }
};

更新游乐场

于 2020-06-03T23:00:52.133 回答
0

上述解决方案对我不起作用。这可能看起来违反直觉，但实际上解决方案是ScrollView在主布局周围添加一个环绕（在我的情况下，是 my 的直接和唯一的孩子Page）。

举个例子：

<GridLayout rows="*, auto" width="100%" height="100%">
    <ScrollView row="0">
        <StackLayout orientation="vertical">
            <StackLayout *ngFor="let m of messages" [horizontalAlignment]="m.incoming ? 'left' : 'right'">
                <Label class="message" [text]="m.message" [class.incoming]="m.incoming" textWrap="true"></Label>
            </StackLayout>
        </StackLayout>
    </ScrollView>

    <GridLayout row="1" columns="*, auto" class="input-layout">
        <TextView class="text-view" [(ngModel)]="message"></TextView>
        
        <Button column="1" text="Send"></Button>
    </GridLayout>
</GridLayout>

它会变成：

<ScrollView>
    <GridLayout rows="*, auto" width="100%" height="100%">
        <ScrollView row="0">
            <StackLayout orientation="vertical">
                <StackLayout *ngFor="let m of messages" [horizontalAlignment]="m.incoming ? 'left' : 'right'">
                    <Label class="message" [text]="m.message" [class.incoming]="m.incoming" textWrap="true"></Label>
                </StackLayout>
            </StackLayout>
        </ScrollView>

        <GridLayout row="1" columns="*, auto" class="input-layout">
            <TextView class="text-view" [(ngModel)]="message"></TextView>
            
            <Button column="1" text="Send"></Button>
        </GridLayout>
    </GridLayout>
</ScrollView>

所以是的，你会有一个嵌套的ScrollView，ListView或者RadListView

感谢@beeman 和他的nativescript-chat-ui示例：https ://github.com/beeman/nativescript-chat-ui/blob/master/src/app/messages/containers/message-detail/message-detail.component.html

于 2021-11-16T14:05:01.807 回答