当使用 Nativescript 为 iOS 选择文本字段时，堆栈视图上的点击操作无法正常工作

Question

所以我正在使用 Nativescript 为 Android 和 iOS 创建应用程序，但我在使用 iOS 时遇到了一些问题。

所以我有一个堆栈视图，我在其中添加了一个名为 "closeKeyboard" 的点击操作（目前只是将消息记录到控制台）。在堆栈视图中，我有文本字段。问题是当我按下文本字段时，堆栈视图操作也会被触发。

在 Android 它按预期工作 - 选择文本字段不会触发堆栈视图操作。

这是main-page.xml

的代码

<Page xmlns="http://schemas.nativescript.org/tns.xsd" navigatingTo="onNavigatingTo">
  <StackLayout tap="closeKeyboard">
    <Label class="conf-button-label" text="Netto sum" />
    <TextField text="{{ sum }}" hint="Type number" returnKeyType="done" keyboardType="number" keyboardPatter="[0-9]*" returnPress="done" id="sum" col="0" row="0"  class=""/>
  </StackLayout>
</Page>

这是 main-page.js

的代码

var createViewModel = require("./main-view-model").createViewModel;
function onNavigatingTo(args) {
    page = args.object;
}

function done(){
    console.log('Input Done');
}


function closeKeyboard(page){
    console.log('Close Keyboard Tapped');
}
exports.done = done;
exports.closeKeyboard = closeKeyboard;
exports.onNavigatingTo = onNavigatingTo;

谁能帮我解决这个问题？

Answer 1

我认为唯一的方法是将 closeKeyboard() 从 Stacklayout 移动到子视图 Label。或者您可以尝试为文本字段定义一个单独的点击操作以覆盖 stacklayout 的点击操作。

Answer 2

如果您想创建类似 javascript 的模糊事件或只是为了隐藏键盘，当您在 TextView 外部点击时，您可以使用本机代码为 ios 设置自定义手势。您可以查看下面附带的示例：

主要-page.xml

<Page xmlns="http://schemas.nativescript.org/tns.xsd" loaded="loaded">
  <StackLayout id="stack">
    <Label text="Tap the button" class="title"/>
    <Button text="TAP" tap="{{ onTap }}" />
    <Label text="{{ message }}" class="message" textWrap="true"/>
    <TextView id="text" text="" hint="Enter some text" backgroundColor="yellow" updateTextTrigger="focusLost"/>
  </StackLayout>
</Page>

主要-page.js

var createViewModel = require("./main-view-model").createViewModel;
var gestures = require("ui/gestures");
var observableModule = require("data/observable"); 
var observableObject = new observableModule.Observable();

var TapHandlerImpl1 = (function (_super) {
    __extends(TapHandlerImpl1, _super);
    function TapHandlerImpl1() {
        _super.apply(this, arguments);
    }
    TapHandlerImpl1.initWithOwner = function (owner) {
        var handler = TapHandlerImpl1.new();
        handler._owner = owner;
        return handler;
    };
    TapHandlerImpl1.prototype.tap = function () {
        this._owner.ios.resignFirstResponder();
    };
    TapHandlerImpl1.ObjCExposedMethods = {
        "tap": { returns: interop.types.void, params: [interop.types.id] }
    };
    return TapHandlerImpl1;
}(NSObject));

var tapHandler = null;

function loaded(args) {
    var page = args.object;
    var field = page.getViewById("text");
    if (page.ios) {
        tapHandler = TapHandlerImpl1.initWithOwner(field)
        var recognizer = UITapGestureRecognizer.alloc().initWithTargetAction(tapHandler, "tap");
        page.ios.view.addGestureRecognizer(recognizer);
    }

    field.addEventListener(observableModule.Observable.propertyChangeEvent, function(pcd){
        console.log(pcd.eventName.toString() + " " + pcd.propertyName.toString() + " " + pcd.value.toString());
    });

    page.bindingContext = observableObject; } 
exports.loaded = loaded;

然而，在 this GitHub 问题中也讨论了同样的问题。

当使用 Nativescript 为 iOS 选择文本字段时，堆栈视图上的点击操作无法正常工作

Tap action on stack view not working properly when text field selected for iOS with Nativescript

ios

nativescript