I would like to know how Svelte-Native works so I will create a little application with this framework this time.
Svelte-Native works on top of NativeSctipt so to start to create an application I need to install NativeScript globally:
npm install -g nativescript
In my case, I needed to use sudo to install it correctly.
To verify if NativeScript is installed I run a command ns
in my terminal and I have lots of information:
This is a native application so I need a device to run it. Here there are links for NativeScript Playground for different platforms:
apple and Android
Is a time to create a little application:
ns create stoicQuotes --svelte
And project is installed:
I had a little problem configuring the environment of my app and I found a solution here and I published an answer on StackOverfolw here
I needed
# link and alias the installed python3
# version to be available to XCode as python
sudo ln -s $(which python3) /usr/local/bin/python
python3 -m pip install --upgrade pip
python3 -m pip install six
and after I needed to install the ios platform
tns platform add ios
And now I can run an app:
ns run ios
Now I go to Home.svelte and I change some code to see how It works:
Home.svelte
<page>
<actionBar title="quote of the day" /> //here I change titlle from "Home" to "quote of the day"
<gridLayout class="home"> //her I add a class home
<label class="info">
<formattedString>
<span class="fas" text="" />
<span text=" {message}" />
</formattedString>
</label>
</gridLayout>
</page>
<script lang="ts">
let message: string = "My new page is here"
</script>
<style>
.info .fas {
color: #893aff; // here I change a color of icone
}
.home{
background: #3aff96; //here I add background color
}
.info {
font-size: 20;
horizontal-align: center;
vertical-align: center;
}
</style>
I continue to change the Home.svelte. For correctly showing my quote I need which displays text in many lines. I need also a working button to search for a new quote. To display all these elements I need in my app also a new tag: :
Home.svelte
<page class="page">
<actionBar title="quote of the day" class="action-bar">
</actionBar>
<stackLayout class="home">
<textView text={message} class="quote"/>
<button text="Next quote" on:tap="{ onTap }" class="button" />
</stackLayout>
</page>
<script>
import { alert } from '@nativescript/core/ui/dialogs'
let message = "This is a long text to see if text view works correctly "
const onTap = () => alert('Tne button works good!');
</script>
<style>
.home{
background-color: #3aff96;
}
.quote{
color: blue;
font-size: 20rem;
font-weight: 600;
}
</style>
All seems to work correctly.
I would like to have some images in my app so I import the component . This is a nativeScript element so it is written with the first letter in low case. At the same time, I would like to choose an image randomly. For this, I created a folder of images in the app folder and I downloaded some images of flowers from pixabay
So Home.svelte is like this (without style):
<page class="page">
<actionBar title="quote of the day" class="action-bar">
</actionBar>
<stackLayout class="home">
<image src = "~/images/img{imgNumber}.png"/> <!--here I put image with variable wit will change dynamicly-->
<textView text={message} class="quote"/>
<button text="Next quote" on:tap="{ onTap }" class="button" />
</stackLayout>
</page>
<script>
//import { alert } from '@nativescript/core/ui/dialogs'
let message = "This is a long text to see if text view works correctly "
let min = 1
let max = 10
let imgNumber = 1
function randomImage() {
imgNumber = Math.floor(Math.random() * (max - min)) + min; // Here this function choose a random image
}
$: imgNumber ? 1 : randomImage(); // this is a reactf variable
const onTap = () => randomImage();
</script>
Now is the time to implement a different quota of stoic philosophers. For this, I create a little file quotes.js in the folder app with variable quotes with quotes, authors, and ids.
Home.svelte
<page class="page">
<actionBar title="quote of the day" class="action-bar">
</actionBar>
<stackLayout class="home">
<image src = "~/images/img{imgNumber}.png"/>
<textView text={quote} class="quote"/>
<textView text={author} class="quote"/>
<button text="Next quote" on:tap="{ onTap }" class="button" />
</stackLayout>
</page>
<script>
//import { alert } from '@nativescript/core/ui/dialogs'
import { quotes } from '../quotes.js'
let min = 1
let max = 10
let imgNumber
let quote
let author
function randomImage() {
imgNumber = Math.floor(Math.random() * (max - min)) + min;
}
function randomQuote(){
let i = Math.floor(Math.random() * quotes.length)
quote = quotes[i].quote
author = quotes[i].author
return quote, author
}
randomQuote()
function randomItems(){
randomImage();
randomQuote();
}
$: imgNumber ? 1 : randomImage();
const onTap = () => randomItems() ;
</script>
This is a time to take care of CSS a little bit.
<page class="page">
<actionBar title="quote of the day" class="action-bar">
</actionBar>
<stackLayout class="home">
<image class="img" src = "~/images/img{imgNumber}.png"/>
<textView text={quote} class="quote"/>
<label class="info">
<formattedString>
<span text=" {author}" class="author"/>
</formattedString>
</label>
<button text="Next quote" on:tap="{ onTap }" class="button" />
</stackLayout>
</page>
<script>
import { quotes } from '../quotes.js'
let min = 1
let max = 10
let imgNumber
let quote
let author
function randomImage() {
imgNumber = Math.floor(Math.random() * (max - min)) + min;
}
function randomQuote(){
let i = Math.floor(Math.random() * quotes.length)
quote = quotes[i].quote
author = quotes[i].author
return quote, author
}
randomQuote()
function randomItems(){
randomImage();
randomQuote();
}
$: imgNumber ? 1 : randomImage();
const onTap = () => randomItems() ;
</script>
<style>
.home{
background: rgb(105,134,14);
background: linear-gradient(90deg, rgba(105,134,14,1) 0%, rgba(121,161,91,1) 100%);
}
.quote{
color: #24261c;
text-align: center;
font-size: 30rem;
font-weight: 600;
margin-top: 10px;
margin-bottom: 10px;
}
.author{
color: #24261c;
text-align: center;
font-size: 20rem;
font-weight: 400;
margin-top: 10px;
margin-bottom: 10px;
}
.info{
text-align: center;
}
.button{
background: rgb(220,162,219);
background: linear-gradient(90deg, rgba(220,162,219,1) 0%, rgba(75,83,174,1) 100%);
color: #24261c;
font-size: 20rem;
border-radius: 0 20px
}
.img{
border-radius: 0 50px;
margin: 20px;
border: solid 5px #24261c;
}
</style>
If you want to see the code you can find it here
Have a nice weekend.
Top comments (0)