Svelte Native

使用 Svelte 和 NativeScript 创建移动应用，通过原生小部件实现。

查看 https://svelte-native.technology 获取文档和教程

特性

Svelte-Native 包括以下 Svelte 特定集成：

• 使用 Svelte 组件在 NativeScript 核心之上创建原生应用的能力
• 特定的导航和模态，例如 navigate({ page: MySvelteComponent })
• 与 Svelte 转换的集成，例如 <label transition:fade="{duration: 2000}">
• 与 Svelte 的作用域样式的集成
• 完全覆盖 NativeScript 核心UI模块
• 使用未经修改的 Svelte 和 Nativescript 模块

进行中

尽管 Svelte Native 功能完整，但仍有一些待解决的问题，以将其提升到其他 NativeScript 库集成的水平

• [x] readme.md 中至少有 1 个表情符号 :+1
• [ ] 更多的测试 😳 #54

安装

您可以使用最新模板开始开发。

$ npm install -g nativescript
$ tns create myapp --template @nativescript/template-blank-svelte

新的 Svelte Native 应用将位于 myapp 文件夹中。

安装后，使用 tns preview、tns build 或 tns run 命令，就像普通 NativeScript 应用一样。

用法

App.svelte

<page>
    <actionBar title="Svelte Native"></actionBar>
    <stackLayout>
        <label text={msg}></label>
        <button text="Change" on:tap="{toggle}"></button>
    </stackLayout>
</page>

<script>
  export let msg = 'Hello World!'
  const toggle = () => {
      msg = "Hi from svelte"
  }
</script>

Main.ts

import App from './components/App.svelte';

import { svelteNative } from 'svelte-native'

svelteNative(App, {msg: "Hi from launcher"});

示例

Svelte Native HackerNews

使用 Svelte Native 的简单 HackerNews 客户端。

查看 https://github.com/halfnelson/svelte-native-hackernews 获取仓库。

Svelte Native Grocery

在 Svelte Native 中的购物应用示例。

查看 https://github.com/halfnelson/svelte-native-grocery 获取仓库。

Svelte Native Realworld

在 Svelte Native 中的真实世界实现应用。

查看 https://github.com/halfnelson/svelte-native-realworld 获取仓库。

致谢

DOM 实现基于 Nativescript-Vue。感谢！API 文档是从 Nativescript-Vue 转移的。网站设计来自 SvelteJS。