How to navigate another page in native-script?

Question

I am trying to create a simple button on native script called 'login'. I have created a login component but when I test the code it says no known component for element Login.

<template>
<Page>
    <TabView height="100%" />
    <ActionBar title="Home" />
    <ScrollView>
        <StackLayout class="home-panel">
            <!--Add your page content here-->
            <Label textWrap="true" text="Play with NativeScript!"
                class="h2 description-label" />
            <Button text="Login" @tap="onLoginTap" />
            <Login>
        </StackLayout>
    </ScrollView>
    </TabView>
</Page>
</template>

<script>
import Login from "./login";
export default {
    data() {
        return {};
    };
},
methods: {
    onLoginTap: function() {
        this.$navigateTo(Login);
    });
</script>

Answer 1

You have various issues in your code

• You can only navigate between Page, your login component was not wrapped by Page element
• I'm not sure why you are using TabView, it's used only when you have tabbed application and there is a specific component hierarchy. Refer documentation for more details. I have removed it as it doesn't seem required for your Page
• You are not suppose to embed Login as a tag in the same Page

Overall I would suggest you to go through the basics of docs to avoid such issues.

Updated Playground