Nativescript 中的图像按钮

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 你好！自定义每个 UI 元素的外观是通过 CSS 样式实现的。您可以为每个按钮添加 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"/>

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

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

Nativescript 中的图像按钮

ImageButton in Nativescript

javascript

css

nativescript