CODEWITHSUNDEEP
javascripthtmltypescriptnativescript
Rüdiger
Rüdiger

Reputation: 943

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

Upvotes: 0

Views: 1713

Answers (1)

pkanev
pkanev

Reputation: 1486

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.

Upvotes: 3

Related Questions