NativeScript 与 Angular 标签导航模板

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

具有用于导航的 TabView 组件的应用模板。

主要功能

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

快速入门

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

tns create my-tab-ng --template tns-template-tab-navigation-ng

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

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

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

教程

架构

标签导航在应用程序组件中设置

• /src/app/app.component - 设置标签导航并定义其项的页面路由出口。

以下文件夹中有四个用于标签内容项的组件

• /src/app/home/home.component - 主主页。显示项目列表并在项目点击时导航到项目详情页面。
• /src/app/home/item-detail/item-detail.component - 项目详情页面。显示点击的项目详细信息。
• /src/app/browse/browse.component - 空白页面
• /src/app/search/search.component - 空白页面

样式

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

它有 3 个全局样式文件，位于应用程序文件夹的根目录

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

获取帮助

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

尝试加入 NativeScript 社区 Slack。Slack 频道是解决故障排除问题和与其他 NativeScript 开发者建立联系的好地方。

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

贡献

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