tns-template-tab-navigation
标签界面模板
npm i --save tns-template-tab-navigation

NativeScript 核心标签导航模板

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

特色功能:具有 TabView 组件的导航。

关键特性

  • 标签导航
  • 五个与标签导航关联的空白页面
  • 可定制主题
  • 用户体验和开发最佳实践
  • 易于理解的代码

快速入门

执行以下命令可从模板创建应用

tns create my-tab-js --template tns-template-tab-navigation

注意:此命令将创建一个新的 NativeScript 应用,该应用使用最新版本的此模板,并发布到 [npm] (https://npmjs.net.cn/package/tns-template-tab-navigation)。

如果您想创建一个使用来自 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-tab-js --template nativescript-app-templates/packages/template-tab-navigation

注意:请记住,master 分支可能引用尚未在 NPM 上发布的依赖项!

教程

架构

应用程序根模块位于

  • /app/app-root - 设置标签导航,每个内容项中都有单独的导航框架。

模板有以下页面用于标签内容项

  • /app/home/home-items-page - 主页。显示项目列表,并在点击项目时导航到项目详情页。
  • /app/home/home-item-detail/home-item-detail-page - 项目详情页。显示点击的项目详情。
  • /app/browse/browse-page - 空白页面
  • /app/search/search-page - 空白页面

样式

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

它有 3 个全局样式文件,位于应用文件夹的根目录下

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

获取帮助

NativeScript 框架有一个充满活力的社区,可以在您遇到问题时提供帮助。

尝试加入 NativeScript 社区 Slack。Slack 频道是获取帮助解决问题的绝佳场所,同时还可以与其他 NativeScript 开发者建立联系。

如果您在此模板中发现问题,请在 NativeScript 存储库中报告问题

贡献

我们喜欢 PR,并且很高兴接受它们。请随时提出更改和新想法。我们将进行审查和讨论,以便它们可以被接受并更好地集成。