I am just starting to explore the world of NativeScript and working on my first project using it. I am facing an issue while trying to incorporate a header component into my main App. Unfortunately, when I run the iOS emulator, the header does not appear on the screen.
Here is my App component:
<template>
<Page>
<Header :numCorrect="numCorrect" :numTotal="numTotal" />
<GridLayout columns="*" rows="*">
<Label class="message" :text="msg" col="0" row="0" />
</GridLayout>
</Page>
</template>
<script >
import Header from "./Header.vue";
export default {
components: {
Header
},
data() {
return {
msg: "click me",
questions: [],
index: 0,
numCorrect: 0,
numTotal: 0
};
}
};
</script>
<style scoped>
.message {
vertical-align: center;
text-align: center;
font-size: 20;
color: #333333;
}
</style>
and my Header component:
<template>
<StackLayout class="nav" orientation="vertical">
<span class="title">Quiz App</span>
<span class="title">Counter : 0/0</span>
</StackLayout>
</template>
<script>
export default {
name: "Header",
props: ["numCorrect", "numTotal"]
};
</script>
<style scoped>
nav {
background-color: red;
color: #ffffff;
}
</style>
Despite trying numerous options, I am still unable to get the header to display. Is there something obvious that I might be missing? As a novice in NativeScript, any guidance would be greatly appreciated.