如何在按钮上使用背景图片？我的地雷现在使用CSS正确显示

Question

我的问题

我正在尝试在NativeScript中复制以下屏幕（这是我们的Figma原型）：

我在使底部导航按钮的背景图像正确显示时遇到问题。

这是我的NativeScript视图的显示方式（请忽略除底部导航之外的所有内容）...

这是我尝试过的最新CSS，没有运气：

/* Activity_icon */
.activity-button {

    background-image: url("~/images/Activity_icon.png");
    width: 200%;
    height: 200%;
    background-repeat: no-repeat;
    background-position: top;
    background-size: 200%;    
}

Live PlayGround代码

My code in NativeScript Playground

有人可以告诉我如何使我的按钮看起来尽可能接近原型吗？我尝试了所有我能想到的一切，但是没有运气。感谢您的关注。

Answer 1

我想分享一个我想出的解决方案：

我使用@NikolayTsonev和@Manoj建议，使用了Tab View Component。一旦找到了自己在Playground中所需的方式，我就必须找出一种方法将Playground示例代码从Typescript转换为纯Javascript。

我偶然发现您可以使用：TNS CREATE，并回答提示。它允许我选择TABVIEW作为模板，选择CORE Javascript作为语言！太棒了！没有任何记录，但是它在那里并且可以工作！谢谢大家的帮助。