Nativerscript 点击区域

Question

在我的 nativescript 应用程序中，我注意到有时点击不会以正确的方式触发。我必须点击几次才能触发事件。这发生在 android 和 ios.

上

如何增加出钢热区？还有什么可能导致这种情况发生？

谢谢。

P.S。我尝试增加我正在捕获其点击事件的元素的填充，但这似乎没有帮助。

Answer 1

我经常增加有点击事件的view的height和width。你可以试试看。

Answer 2

这里有几个因素在起作用。

首先，当您在 NativeScript 中拦截页面级事件时，它似乎会阻止其他小部件的事件触发。例如，如果您点击一个文本字段，但有一个用于点击事件的页面级侦听器，则 TextField 上的点击将被页面级侦听器拦截。

其次，双击似乎利用了事件中的计时问题，允许点击事件冒泡到下一个监听小部件。

最后，当您尝试点击的元素上有填充时，点击不会在填充区域上注册。看起来您只能点击小部件的中间（填充区域内）。在我的例子中，必须在垂直中心直接点击我有填充的 TextField（并且填充为 5px）。

要测试它，请尝试从元素中删除填充并查看点击是否再次正常工作。

通过执行以下操作，我能够使用软件键盘创建非常流畅/自然的体验：

将 TextField 包装在 StackLayout 中，并将填充放在 StackLayout 而不是小部件上
添加仅在点击文本字段时关闭软键盘的页面级侦听器，并在触发该侦听器后将其删除。

例如：XML 文件

<StackLayout id="loginFieldWrapper" padding="5 5 5 5">
    <TextView hint="Enter Login ID" id="loginField" keyboardType="number" returnKeyType="done" returnPress="{{hideKeyboard}}" />
</StackLayout>

支持javascript文件

   loginField.on(gestures.GestureTypes.tap, function(args) {
            page.on(gestures.GestureTypes.tap, function (args) {
                loginField.dismissSoftInput();
                page.off(gestures.GestureTypes.tap);
            });
    });

Answer 3

将项目包裹在一些布局中以增加可点击区域

<StackLayout (tap)="select(param)">
      <Label text="{{description}}" textWrap="true" marginTop="40px" marginBottom="40px">
      </Label>
</StackLayout>

Nativerscript 点击区域

Nativerscript tap area

nativescript