使用 NativeScript Sidekick 启动器套件启动您的下一个应用程序

NativeScript Sidekick 的宗旨是让您开发跨平台原生移动应用程序变得更加轻松。还有什么比为您的应用程序开发过程提供易于使用（且外观精美）的启动器套件更能简化应用程序开发呢？

这篇文章是我们“NativeScript Sidekick 周”系列文章的一部分，该系列文章深入探讨了每个主要 Sidekick 功能的使用方法。当然，我们从启动器套件开始本周的系列文章。

无论您喜欢从空白模板开始，还是从功能齐全的主从应用程序开始，Sidekick 都提供了一些不错的选项供您开始使用。让我们深入了解！

启动器套件的类型

在构建新的应用程序时，我们中的许多人喜欢在构建应用程序的基本 UI 和逻辑时获得一些帮助。NativeScript Sidekick 为各种场景提供了一组“启动器套件”。

空白模板
侧边抽屉导航
选项卡导航
主从（使用 Firebase 或 Kinvey 作为您选择的 BaaS）

list of starter kits

JavaScript、TypeScript、Angular，哦，我的天哪！

我们有提到每个启动器套件都提供选择语言/框架的选项吗？无论您是 JavaScript 纯粹主义者、TypeScript 爱好者还是 Angular 开发人员，Sidekick 提供的选项都会让您感到宾至如归。

languages of starter kits

空白模板

“空白模板”正是如此。空白！它实际上为您提供了一个空白画布，您可以从这里开始开发 NativeScript 应用程序。我想在这里放一张图片，但这会是一个空白屏幕 ¯\_(ツ)_/¯。

但是，您应该知道，如果您使用空白模板，我们不会让您陷入困境。这里有一些基本的样板代码，以确保您能够从正确的起点开始。当然，您代码背后的 JavaScript 代码将根据您选择的语言而有所不同。

在空白模板中，您的 home.xml 文件包含页面第一个视图的标记，并且它仅包含一个 ActionBar 和一个 GridLayout 的占位符。

<Page class="page" navigatingTo="onNavigatingTo" xmlns="http://www.nativescript.org/tns.xsd">
    <!--Add your page content here-->
    <ActionBar class="action-bar">
        <Label class="action-bar-title" text="Home"></Label>
    </ActionBar>
    <GridLayout>
    </GridLayout>
</Page>

请注意指定的 class 名称，这些名称来自默认的 NativeScript 核心主题！

导航模板

导航对于任何现代移动应用程序都至关重要，因此 Sidekick 提供了两种以导航为中心的模板：一种使用来自 NativeScript UI 的 SideDrawer 组件，另一种使用选项卡进行导航。

让我们快速浏览一下抽屉导航模板。

starter kit with drawer navigation

基于抽屉的导航为我们提供了一种干净且简便的方式来利用隐藏的导航选项菜单。使用通用模板进行导航的一个潜在问题是，在多个视图之间重复使用。这就是 NativeScript 的自定义组件发挥作用的地方。

使用自定义组件，您可以创建一个可以在多个视图之间轻松重复使用的单个组件。导航是一个明显的候选者。如果您打开此模板中的任何 *.xml 视图，您将看到以下代码片段

<nsDrawer:RadSideDrawer.drawerContent>
    <StackLayout>
        <myDrawer:MyDrawer selectedPage="Browse"/>
    </StackLayout>
</nsDrawer:RadSideDrawer.drawerContent>

<myDrawer:MyDrawer ... /> 元素是定义在 /shared/my-drawer 中的共享组件。此组件包含应用程序抽屉的内容。

接下来，让我们看一下选项卡导航模板。

starter kit with tabs

在 NativeScript 中使用基于选项卡的导航与侧边抽屉略有不同。TabView 是一个包含其他视图的组件。因此，如果您打开生成的 tabs-page.xml 文件，您将看到类似于以下内容的内容

<TabView selectedIndexChanged="onSelectedIndexChanged">
  <TabView.items>

    <TabViewItem title="Home" ios:iconSource="res://tabIcons/home">
      <TabViewItem.view>
        <home:HomeView/>
      </TabViewItem.view>
    </TabViewItem>

    <TabViewItem title="Browse" ios:iconSource="res://tabIcons/browse">
      <TabViewItem.view>
         <browse:BrowseView/>
      </TabViewItem.view>
    </TabViewItem>

    <TabViewItem title="Search" ios:iconSource="res://tabIcons/search">
      <TabViewItem.view>
         <search:SearchView/>
      </TabViewItem.view>
    </TabViewItem>

  </TabView.items>
</TabView>

...其中“Home”、“Browse”和“Search”再次作为自定义组件在 TabView 中引用。

主从模板

最后，还有两个主从模板，展示了将 NativeScript 与流行的 BaaS 提供商 Firebase 和 Kinvey 结合使用时的功能。

starter kits master detail

主从模板是启动许多常见业务场景的好方法，在这些场景中，您在数据实体之间公开父子关系。虽然此模板非常“以汽车为中心”，但您可以轻松地替换自己的变量和内容。

此应用程序模板中演示的许多 Kinvey 功能之一是能够轻松地将文件上传到您的后端。

return Kinvey.Files.upload(imageFile, metadata, { timeout: 2147483647 })
    .then((uploadedFile) => {
        const query = new Kinvey.Query();
        query.equalTo("_id", uploadedFile._id);

        return Kinvey.Files.find(query);
    })
    .then((files) => {
        if (files && files.length) {
            const file = files[0];
            file.url = file._downloadURL;

            return file;
        }
        else {
            Promise.reject(new Error("No items with the given ID could be found."));
        }
    });

启动器套件的下一步发展？

虽然我们一直在努力改进我们现有的启动器套件，但我们也希望添加和扩展我们的产品。我们正在考虑许多选项，例如社区生成的启动器套件和专注于 Vue 框架的模板。敬请关注！

附注：您是否已订阅 NativeScript 新闻？