NativeScript 核心侧导航模板

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

具有 RadSideDrawer 组件的导航的应用模板。RadSideDrawer 组件是 Progress NativeScript UI 的一部分。

关键特性

• 侧抽屉导航
• 五个与抽屉导航挂钩的空白页面
• 可定制的主题
• 用户体验和开发最佳实践
• 易于理解的代码

快速开始

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

ns create my-drawer-js --template @nativescript/template-drawer-navigation

注意：此命令将创建一个新的 NativeScript 应用，它使用最新版本的模板发布到 npm。

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

# 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)
ns create my-drawer-js --template nativescript-app-templates/packages/template-drawer-navigation

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

指南

架构

有一个文件夹用于设置 RadSideDrawer 实例作为应用程序根目录

• /app/app-root/app-root - 设置 RadSideDrawer 抽屉内容并定义页面的导航框架。

RadSideDrawer 具有以下组件结构

• RadSideDrawer - 在页面上显示抽屉的组件。
• RadSideDrawer.drawerContent - RadSideDrawer 的一部分，它包含一个自定义组件 drawer，显示抽屉的内容。
• RadSideDrawer.mainContent - RadSideDrawer 的一部分，它包含页面的主要内容。

模板具有以下空白页面模块

• /app/home/home-page
• /app/browse/browse-page
• /app/search/search-page
• /app/featured/featured-page
• /app/settings/settings-page

样式

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

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

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

获取帮助

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

尝试加入 NativeScript 社区 Discord。Discord 频道是一个获取帮助调试问题的好地方，也可以与其他 NativeScript 开发者建立联系。

如果您发现此模板存在问题，请通过NativeScript代码仓库报告问题。

贡献

我们非常欢迎PR（Pull Request，拉取请求），并乐意接受。您可以自由提出修改和建议。我们会进行审查和讨论，以确保它们能够被接受并更好地整合。