ImageButton in Nativescript

Question

Ich wollte wissen, wie man dem Bild in NationalScript und anderen benutzerdefinierten Animationen Text hinzufügen könnte, und ich wollte auch wissen, wie man einen Knopf auf jeder Seite manipulieren könnte. Zum Beispiel: Ich habe 2 Knöpfe auf einer Seite und ich möchte jeden Knopf manipulieren, damit ich besser kontrollieren kann.

Danke!

EDIT: Bisher habe ich dieses:

<Page loaded="pageLoaded"> 

<StackLayout> 

    <Image row="1"/> 
     <Button row="1"/> 
      <Image src="~/images/1stfloor.jpg" height="200" width="200"/> 
       <Button text ="clickone" tap="tapAction" /> 


<Image row="1" /> 
<Button row="1" /> 
<Image src="~/images/2ndfloor.jpg" height="200" width="200"/> 
<Button text ="hiya" tap="tapAction"/> 


</StackLayout> 

Das ist im Wesentlichen meine xml-Code und ich möchte wissen, wie ich das oben tun konnte.

JS:

var frameModule = require("ui/frame"); 

exports.pageLoaded = function(args) { 
    var page = args.object; 
    page.bindingContext = {}; 

    page.css = "Button1 {color : green}"; 
    page.css = "Button2 {color: red}"; 
} 
//later items will overlap the earlier items 
exports.tapAction = function() { 
    frameModule.topmost().navigate("second-page"); 
} 

EDIT: Also das ist im Wesentlichen, wie meine app aussieht, ich im Wesentlichen drei Bilder haben muß, die als Tasten dienen und in verschiedene Seiten gehen müssen. Die Bilder sind übereinander zu arrangieren.

Answer 1

Hallo zu SO und NatieScript! Anpassung der Apperiance jedes UI-Elements wird mit CSS-Stilen erreicht. Sie können jeder Ihrer Schaltflächen Klassenattribute hinzufügen und in CSS angeben, wie sie aussehen sollen. Zum Beispiel:

Haupt page.css

.myButtonOne { 
    background-color: red; 
} 

.myButtonTwo { 
    background-color: green; 
} 

Haupt page.xml

<Page xmlns="http://www.nativescript.org/tns.xsd" loaded="onLoaded" navigatedTo="onNavigatedTo"> 
    <StackLayout> 
     <Button text="Button One" tap="tapAction" class="myButtonOne" /> 
     <Button text="Button Two" tap="anotherTapAction" class="myButtonTwo" /> 
    </StackLayout> 
</Page> 

Genau wie die CSS nativen Sie können Set ID auf Ihren UI-Elementen und holen Sie sie in Ihrem Code zurück.

<Button text="Button One" tap="" class="myButtonOne" id="btn-one"/> 

exports.loaded = function(args) { 
 
    var page = args.object; 
 
    var buttonOne = page.getViewById("btn-one"); 
 
}

bemerke ich muss auch, dass StackLayout haben keine Zeilen und Spalten (suchen Sie nach Gridlayout) und für ein besseres Verständnis von Layouts und Styling Sie in der Dokumentation NativeScript reffer kann NativeScript documentation