How to create a custom navigation bar in NativeScr

问题:

I am new to NativeScript and experimenting with it a little via the playground. There are some UIs that i'd like to implement and don't see samples of and I was wondering what would it take to implement? specifically, I'd like to create a bottom navigation such as below, with the middle button.

回答1:

Here is a pseudocode gives you the layout you are looking for.

<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>

Lear more about NativeScript layouts at https://www.nslayouts.com/ You can also find sample projects at Marketplace

回答2:

You can easily find diverse UI samples in NativeScript Marketplace

I could find these bottom-bar navigation UI:

1. Rich UI - Social Fitness Tracker (Core Vanilla JavaScript)

   

2. Tinder-like Swipeable Cards (Angular)

   

There are many more samples with unique bottom-bar navigation UI design, I suggest you to explore the sample marketplace by yourself to find the one you like most.

Also, there is nativescript-bottom-navigation, a verified plugin for implementing bottom-bar navigation.