Как создать пользовательскую панель навигации в NativeScript?

Question

Я новичок в NativeScript и немного экспериментирую с ним на игровой площадке.Есть некоторые пользовательские интерфейсы, которые я хотел бы реализовать, и не вижу примеров, и мне было интересно, что потребуется для их реализации?в частности, я хотел бы создать нижнюю навигацию, такую ​​как ниже, со средней кнопкой.

Answer 1

Здесь псевдокод дает вам макет, который вы ищете.

<GridLayout>
    <GridLayout rows="*,auto">
        <StackLayout row="0" backgroundColor="#ccc">
            <Label text="Your Content" fontSize="30" textAlignment="center"></Label>
        </StackLayout>
        <GridLayout row="1" columns="*,*" height="48">
            <StackLayout col="0">
                <Image></Image>
                <Label text="Groups" textAlignment="center"></Label>
            </StackLayout>
            <StackLayout col="1">
                <Image></Image>
                <Label text="Communities" textAlignment="center"></Label>
            </StackLayout>
        </GridLayout>
    </GridLayout>
    <GridLayout borderRadius="50%" width="68" height="68" backgroundColor="#ec5281"
        verticalAlignment="bottom" horizontalAlignment="center" marginBottom="20">
        <Label text="Post" color="white" verticalAlignment="center"
            horizontalAlignment="center"></Label>
    </GridLayout>
</GridLayout>

Узнайте больше о макетах NativeScript на https://www.nslayouts.com/ Примеры проектов также можно найти на Marketplace

Answer 2

Вы можете легко найти разнообразные образцы пользовательского интерфейса в NativeScript Marketplace

Я мог бы найти этот интерфейс навигации нижней панели:

1. Rich UI - отслеживание фитнеса в социальных сетях (Core Vanilla JavaScript)

   

2. Смахивающие карточки типа трут (угловой)

   

Существует еще много образцов с уникальным дизайном пользовательского интерфейса навигации в нижней панели, я предлагаю вам самостоятельно изучить рынок образцов, чтобы найти тот, который вам больше всего нравится.

Также имеется nativescript-bottom-navigation , проверенный плагин для реализации навигации по нижней панели.