Marketplace
作者 NativeScript.org
tns-template-master-detail-kinvey
由 tns-bot 创建 | v6.5.0
用于显示来自 Kinvey 的项目集合的主从界面，并检查和编辑所选项目属性。
npm i --save tns-template-master-detail-kinvey

NativeScript 核心主从应用程序模板

应用程序模板可以帮助您使用内置 UI 元素和最佳实践快速启动原生跨平台应用程序。在创建新应用程序时，节省重复编写样板代码的时间。

此主从模板是任何需要显示对象集合及其详细信息并在在线和离线模式下工作的应用程序的基本构建块。该模板使用 RadListView 组件显示主列表。RadListView 组件是 Progress NativeScript UI 的一部分。

主要功能

  • 可编辑的主从界面
  • Kinvey 数据库集成
  • 离线工作
  • 可定制主题
  • 用户体验和开发最佳实践
  • 易于理解的代码

快速入门

执行以下命令以从该模板创建应用程序

tns create my-master-detail-kinvey-js --template tns-template-master-detail-kinvey

注意：此命令将创建一个新的 NativeScript 应用程序，该应用程序使用最新版本的此模板发布到 [npm] (https://npmjs.net.cn/package/tns-template-master-detail-kinvey)。

如果您想创建一个使用模板 master 分支源的新应用程序，您可以执行以下操作

# clone nativescript-app-templates monorepo locally
git clone [email protected]:NativeScript/nativescript-app-templates.git

# create app template from local source (all templates are in the 'packages' subfolder of the monorepo)
tns create my-master-detail-kinvey --template nativescript-app-templates/packages/template-master-detail-kinvey

演练

架构

应用程序根模块位于

  • /app/app-root - 设置一个 Frame，让您在页面之间导航。

该模板有以下页面模块

  • /app/cars/cars-list-page - 主列表页面。获取数据并将其显示在列表中。在项目上点击时，它会导航到项目详细信息页面。
  • /app/cars/car-detail-page/car-detail-page - 项目详细信息页面。显示点击的项目详细信息。有一个 编辑 按钮可导航到编辑页面。
  • /app/cars/car-detail-edit-page/car-detail-edit-page - 项目详细信息编辑页面。为所选项目提供编辑选项。 完成 按钮保存更改。

有一个模型表示数据项

  • /app/cars/shared/car-model

该模板还提供数据服务

  • /app/cars/shared/car-service - 作为主从数据项的数据层。包装用于在数据库上执行操作的函数。

Kinvey 集成

该模板使用 {N} Kinvey 插件。初始化在应用程序启动之前在 /app/app.js 文件中完成。初始化脚本位于 /app/shared/kinvey.common.js。

[可选] Kinvey 数据库设置

根据设计，应用程序连接到 Kinvey 中样本数据的只读副本。如果您想看到“编辑”功能在行动中的效果，您必须克隆样本数据并更新应用程序配置，以指向您自己的 Kinvey 设置。您可以在 此处 找到如何实现此功能的详细说明。

样式

此模板配置为使用SASS进行样式设计。所有使用的类都基于 {N} 核心主题 - 咨询文档了解如何进行自定义。

它包含3个全局样式文件，位于应用文件夹的根目录

  • /app/_app-common.scss - 全局通用样式表。这些样式规则应用于Android和iOS。
  • /app/app.android.scss - 全局Android样式表。这些样式规则仅应用于Android。
  • /app/app.ios.scss - 全局iOS样式表。这些样式规则仅应用于iOS。

每个组件在其文件夹中包含3个样式文件

  • ../_{page-name}-common.scss - 组件通用样式表。这些样式规则应用于Android和iOS。
  • ../{page-name}.android.scss - 组件Android样式表。这些样式规则仅应用于Android。
  • ../{page-name}.ios.scss - 组件iOS样式表。这些样式规则仅应用于iOS。

获取帮助

NativeScript框架有一个充满活力的社区，可以帮助您解决问题。

尝试加入NativeScript社区Slack。Slack频道是获取帮助解决问题的好地方，也可以与其他NativeScript开发者交流。

如果您发现此模板存在任何问题，请在NativeScript仓库中报告问题。

贡献

我们热爱PR，并乐意接受。请随意提出更改和新想法。我们将进行审查和讨论，以便它们可以被接受并更好地整合。

注意：请注意，master分支可能引用了尚未在NPM上的依赖项！