npm i --save tns-template-tab-navigation-ts
- 版本:6.5.4
- GitHub: https://github.com/NativeScript/nativescript-app-templates
- NPM: https://npmjs.net.cn/package/tns-template-tab-navigation-ts
- 下载量
- 昨天:0
- 上周:0
- 上个月:0
NativeScript Core with TypeScript 标签页导航模板
应用模板可以帮助您利用内置 UI 元素和最佳实践快速启动您的原生跨平台应用。当您创建新应用时,节省重复编写样板代码的时间。
具有 TabView 组件的标签页导航模板
主要功能
- 标签导航
- 五个与标签导航关联的空白页面
- 可定制的主题
- 用户体验和开发最佳实践
- 通过详尽的代码注释轻松理解代码
快速入门
执行以下命令从该模板创建应用
tns create my-tab-ts --template tns-template-tab-navigation-ts
注意:此命令将创建一个使用最新版本的此模板的 NativeScript 应用,该模板发布到 npm。
如果您想创建一个使用模板 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-ts --template nativescript-app-templates/packages/template-tab-navigation-ts
注意:请记住,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,并且欣然接受它们。请随意提出更改和新想法。我们将进行审查和讨论,以便它们可以接受并更好地集成。