如何在按钮上使用背景图像？我现在使用 css 正确显示答案

【问题标题】：How do I use background image on button? Mine now showing properly using css如何在按钮上使用背景图像？我现在使用 css 正确显示
【发布时间】：2019-04-24 09:55:08
【问题描述】：

我的问题

我正在尝试在 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

谁能告诉我如何让我的按钮看起来尽可能接近原型？我已经尝试了我能想到的一切，但没有运气。感谢观看。

【问题讨论】：

我建议使用 tns-core-modules 提供的 TabView 组件，Android 的底部位置。在此处查看示例 - github.com/NativeScript/nativescript-sdk-examples-js/tree/…。该示例展示了如何设置选项卡的位置以及如何设置所需的图标。
图像明显显示（通过查看“活动”选项卡）。由于文本过大，您无法清楚地看到它们。减小文本大小
正如@NikolayTsonev 所建议的，您可以在此处使用 TabView 组件。如果您想使用自定义按钮，请减小字体大小。还要查看您的图像，它不能是背景图像，请使用包装在 GridLayout 中的 Image 和 Label 组件。
谁能给我看一个你们建议的 TabView 的纯 Javascript 示例？我看到了 TypeScript 版本，但无法将 Typescript 添加到当前项目。它是用核心 JS 编写的。 TabView 页面上的那个例子正是我所需要的。他们没有展示核心示例，只是我的运气。

标签： css nativescript

【解决方案1】：

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

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

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

【讨论】：