Как использовать фоновое изображение на кнопке? Мой теперь показывает правильно, используя 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

Мой код в NativeScript Playground

Может кто-нибудь показать мне, как заставить мою кнопку выглядеть как можно ближе к прототипу? Я перепробовал все, что мог придумать, но безуспешно Спасибо за поиск.

Answer 1

Я хочу поделиться решением, которое я выяснил:

Используя предложения @NikolayTsonev и @Manoj, я использовал Tab View Component . Когда я выглядел так, как мне было нужно на игровой площадке, мне пришлось искать способ преобразовать пример кода игровой площадки из Typescript в чистый Javascript.

По чистой случайности я узнал, что вы можете использовать: TNS CREATE и отвечать на запросы. Это позволяет мне выбрать TABVIEW в качестве шаблона и CORE Javascript в качестве языка! Потрясающие! Нигде это не задокументировано, но оно есть и работает! Спасибо всем за вашу помощь.