Svelte-Native는 어떻게 작동합니까?

Svelte-Native가 어떻게 작동하는지 알고 싶기 때문에 이번에는 이 프레임워크로 작은 애플리케이션을 만들겠습니다.

Svelte-Native는 NativeSctipt 위에서 작동하므로 전역적으로 NativeScript를 설치해야 하는 애플리케이션을 만들기 시작합니다.

 npm install -g nativescript

제 경우에는 제대로 설치하려면 sudo를 사용해야 했습니다.
NativeScript가 설치되어 있는지 확인하려면 ns 명령을 실행합니다.
내 터미널에는 많은 정보가 있습니다.



이것은 기본 응용 프로그램이므로 실행하려면 장치가 필요합니다. 다음은 다양한 플랫폼용 NativeScript Playground 링크입니다.
apple 및 Android

작은 응용 프로그램을 만들 시간입니다.

ns create stoicQuotes --svelte

그리고 프로젝트가 설치됩니다.





내 앱의 환경을 구성하는 데 약간의 문제가 있었고 해결책을 찾았고here StackOverfolw에 답변을 게시했습니다here.
내가 필요

# 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

그리고 iOS 플랫폼을 설치해야 했던 후

tns platform add ios

이제 앱을 실행할 수 있습니다.

ns run ios

이제 Home.svelte로 이동하여 작동 방식을 확인하기 위해 몇 가지 코드를 변경합니다.
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="&#xf135;" />
                <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>

나는 Home.svelte를 계속 변경합니다. 내 인용문을 올바르게 표시하려면 여러 줄에 텍스트를 표시하는 것이 필요합니다. 새 견적을 검색하려면 작업 버튼도 필요합니다. 이 모든 요소를 ​​내 앱에 표시하려면 다음과 같은 새 태그도 필요합니다.
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>

모두 올바르게 작동하는 것 같습니다.

내 앱에 일부 이미지를 갖고 싶어서 구성 요소를 가져옵니다. 이는 nativeScript 요소이므로 첫 글자를 소문자로 작성합니다. 동시에 이미지를 무작위로 선택하고 싶습니다. 이를 위해 앱 폴더에 이미지 폴더를 만들고 pixabay에서 꽃 이미지를 다운로드했습니다.
따라서 Home.svelte는 다음과 같습니다(스타일 없음).

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

지금은 스토아 철학의 다른 할당량을 구현할 때입니다. 이를 위해 따옴표, 작성자 및 ID가 포함된 변수 따옴표가 있는 폴더 app에 작은 파일 quotes.js를 만듭니다.
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>

CSS를 조금 신경써야 할 때입니다.

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

코드를 보려면 찾을 수 있습니다here.
좋은 주말 되세요.