NativescriptのImageButton

Question

ネイティブスクリプトやその他のカスタムアニメーションなどでテキストをどのように追加するかを知りたかったので、各ページのボタンをどのように操作できるかも知りたかったのです。例：私は1つのページに2つのボタンがあり、私はより良いコントロールを持つことができるように各ボタンを操作したい。

ありがとうございます！

EDITは：

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

ザッツ基本的に私のXMLコードと私は上記の操作を行うことができる方法を知りたい：これまでのところ、私はこれを持っています。

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は：これは、私は基本的にボタンとして機能し、別のページに移動する必要が3枚の画像を持っている必要があり、私のアプリがどのように見えるか、本質的です。写真はお互いの上に並べるべきです。 SOとNatieScriptへ

Answer 1

こんにちは！ 各UI要素のapperianceをカスタマイズすることは、CSSスタイルで実現されます。 各ボタンにクラス属性を追加し、それぞれの外観をどのように見せるかをCSSで指定できます。たとえば ：ちょうどあなたがすることもできネイティブCSSなどの

メインpage.css

.myButtonOne { 
    background-color: red; 
} 

.myButtonTwo { 
    background-color: green; 
} 

メイン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> 

セットidをあなたのUI要素に追加して、あなたのコードの中に入れてください。

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

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

また、私はStackLayoutはrowsとcolsを持っていないことに気づく必要があります（GridLayoutのを探してください）とレイアウトとスタイリングをよりよく理解するために、あなたはNativeScriptドキュメントNativeScript documentation

にrefferすることができます