Rüdiger Rüdiger - 1 month ago 9
HTML Question

Create clickable Images in NativeScript

I am looking for a way to set clickable images in NativeScript. I plan to set 5 images next to each others and whenever one image is clicked the images to the left should change its their values.

What I tried:

<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>


Which did not even display the images. What did I do wrong?

Edit: Updated formatting

Answer Source

According to the documentation you can set a touch listener simply using the on("event", implementation) method.

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

Therefore your images would have a (tap) attribute in xml, or you can set the onTap event as mentioned above.

And Image is not a composite view (a layout), therefore it should not hold a button element within.