Nativescript中的ImageButton

Question

我想知道如何在nativescript和其他自定义动画等中为图片添加文字，我也想知道如何操作每个页面上的按钮。例如：我在一个页面上有2个按钮，我想操作每个按钮，以便我可以更好地控制。

谢谢！

编辑：到目前为止我有这个：

<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");
}

编辑：所以这实际上就是我的应用程序的样子，我基本上需要有3张照片作为按钮，需要进入不同的页面。这些图片将相互排列。

Answer 1

您好，SO和NatieScript！ 使用CSS样式可以自定义每个UI元素的外观。 您可以为每个按钮添加class属性，并在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>

就像原生CSS一样，您也可以在UI元素上设置 id ，然后将它们放在您的代码中。

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

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

此外，我必须注意StackLayout没有行和列（查找GridLayout），为了更好地理解布局和样式，您可以使用NativeScript文档lm90