在 NativeScript 中创建可点击的图像答案

【问题标题】：Create clickable Images in NativeScript在 NativeScript 中创建可点击的图像
【发布时间】：2017-08-23 12:38:36
【问题描述】：

我正在寻找一种在 NativeScript 中设置可点击图像的方法。我计划将 5 个图像彼此相邻设置，并且每当单击一个图像时，左侧的图像应该更改其值。

我尝试了什么：

    <Label col="0" row="0" class="text-details segment-content" [text]="'RATING_AVG'|translate">
    </Label>
    <Label col="1" row="0" class="text-details segment-content">
        <GridLayout columns="*,*,*,*,*" rows="*">
            <Image src="~/pages/filmdetails/Stern-outline-10.jpg" col="0" row="0">
                <Button (onTap)="logTap()">
                </Button>
            </Image>
            <Image src="~/pages/filmdetails/Stern-outline-10.jpg" col="1" row="0">
                <Button (onTap)="logTap()">
                </Button>
            </Image>
            <Image src="~/pages/filmdetails/Stern-outline-10.jpg" col="2" row="0">
                <Button (onTap)="logTap()">
                </Button>
            </Image>
            <Image src="~/pages/filmdetails/Stern-outline-10.jpg" col="3" row="0">
                <Button (onTap)="logTap()">
                </Button>
            </Image>
            <Image src="~/pages/filmdetails/Stern-outline-10.jpg" col="4" row="0">
                <Button (onTap)="logTap()">
                </Button>
            </Image>
        </GridLayout>   
    </Label>

甚至没有显示图像。我做错什么了？

编辑：更新格式

【问题讨论】：

我从来没有使用过 nativescript，但嵌套看起来很糟糕。您在Label 中有一个Gridlayout，而您的三个Images 不在五列Gridlayout 内。
根据this 应该是<Button (tap)="logTap()">
哦，我显然错过了该图像的一些格式 - onTap 功能有效，我已经用另一个按钮进行了测试。不过谢谢你的回复！ :)

标签： javascript html typescript nativescript

【解决方案1】：

根据文档，您可以简单地使用on("event", implementation) 方法设置touch 侦听器。

https://docs.nativescript.org/ui/gestures#touch

因此，您的图像将在 xml 中具有 (tap) 属性，或者您可以如上所述设置 onTap 事件。

而且Image 不是复合视图（布局），因此它不应该在其中包含按钮元素。

【讨论】：