新闻详情

新闻详情

首页 / 资讯中心 / 详情

NativeScript ui-mobile-base 开发工作流:从 Android/iOS 原生构建到应用内集成

发布时间:2026/10/1 21:38:44来源:尧图网络
NativeScript ui-mobile-base 开发工作流:从 Android/iOS 原生构建到应用内集成
【免费下载链接】NativeScript⚡ Write Native with TypeScript ✨ Best of all worlds (TypeScript, Swift, Objective C, Kotlin, Java, Dart). Use what you love ❤️ Angular, React, Solid, Svelte, Vue with: iOS (UIKit, SwiftUI), Android (View, Jetpack Compose), Flutter and you name it compatible.项目地址https://gitcode.com/gh_mirrors/na/NativeScript点击查看免费下载本指南以仓库内 DevelopmentWorkflow.md 为核心脉络系统讲解 NativeScript 原生 UI 底座包ui-mobile-base历史名tns-core-modules-widgets的完整开发流程包括环境准备、一键打包、Android/iOS 分平台构建以及如何通过npm link将其集成到 NativeScript 应用中用于本地调试。阅读后你将掌握这套原生组件库的构建命令、产物路径与接入方法并能结合源码结构理解构建脚本背后的工程组织。一、先认识这个包NativeScript 的原生 UI 底座在进入构建流程之前有必要先明确这个包在整个 NativeScript 生态中的位置。根据 README.md 的说明ui-mobile-base是NativeScript core modules 所使用的原生代码Java 与 Objective-C它为上层 TypeScript 实现的 UI 控件提供真正的原生渲染能力。从仓库源码结构可以清晰看到这一定位Android 侧android/widgets 下是一整套 Java 布局与控件实现包括AbsoluteLayout、DockLayout、FlexboxLayout、GridLayout、StackLayout、WrapLayout、TabLayout、TabViewPager、BorderDrawable、BoxShadowDrawable等它们是 NativeScript 布局系统在 Android 上的落点iOS 侧ios/TNSWidgets 是一个 Xcode 工程包含TNSLabel、UIViewPassThroughParent、UIViewPropertyBag、NSDataAsync等 Objective-C 类别与工具类用于补齐 UIKit 在 NativeScript 场景下的能力。当前包的元数据见 package.json包名为nativescript/ui-mobile-base版本7.0.0描述为 Native UI base components used with NativeScript声明支持ios: 6.0.0与android: 6.0.0平台基线采用 Apache-2.0 许可证。二、环境准备Prerequisites开发这套原生组件库前需要先安装好原生工具链与 NativeScript 本身安装 NativeScript 与原生工具链按官方 quick-setup 文档完成配置即 Node.js、NativeScript CLI 及 Android/iOS 环境要求Android 工程需要安装Android Studio用于打开位于android/目录下的 Android 工程iOS 工程需要安装Xcode用于打开位于ios/TNSWidgets目录下的 Xcode 工程。这两类 IDE 不只是“查看源码”的工具也是本地构建与调试的入口与后文的构建流程直接相关。三、一键构建整个包./build.sh在 macOS 上只需在包根目录执行$ ./build.sh该脚本会同时构建 Android 与 iOS并完成两件事将产物组装到./dist/package目录即 npm 包的内容布局将其打包为./dist/tns-core-modules-widgets-*.tgz压缩包供本地发布或安装使用。值得注意的是构建脚本虽未随仓库提交当前包目录下只有文档、源码与工程配置但它在仓库的 Nx 工程定义 project.json 中被直接引用build目标依次执行./build.sh、cp -R dist/package/platforms/* ../../packages/core/platforms与node tools/native-state.mjs write。这意味着一次./build.sh不仅是产出 tgz还会把原生平台资源同步进packages/core/platforms保持 core 包与原生底座一致——这正是该工作流与 NativeScript 主仓库monorepo深度耦合的体现。增量构建与一致性校验project.json还定义了两个与构建配套的目标ensure-native以SKIP_NATIVE_IF_UNCHANGED1 ./build.sh方式执行即在原生代码未变化时跳过重建适合 CI 或日常开发中避免重复全量编译verify-native执行node tools/native-state.mjs check通过 tools/native-state.mjs 校验原生产物的状态是否与记录一致用于确认当前原生二进制与预期版本匹配。这组目标揭示了该仓库的工程实践原生构建并非一次性动作而是与 core 包平台目录的同步、原生状态记录/校验绑定在一起的受控流程。四、单独构建 Android./build.android.sh在 Unix 类系统Linux、macOS上可跳过 iOS 只构建 Android$ ./build.android.sh该脚本只构建 Android 工程同样会把 npm 包组装到./dist/package并打出./dist/tns-core-modules-widgets-*.tgz。此外构建的核心产物——AAR 文件——输出在./android/widgets/build/outputs/aar/widgets-release.aarwidgets-release.aar是 Android 原生库的发布形态NativeScript 运行时正是通过它把 Java 布局控件桥接给上层。Android 工程结构速览Android 目录是一个标准的多模块 Gradle 工程settings.gradle 中声明了两个模块include :widgets include :widgetdemo:widgets核心原生库模块即上面提到的全部 Java 控件源码与proguard-rules.pro混淆规则默认保留为空配置说明该库按运行时反射调用设计通常不应过度混淆:widgetdemo一个 Kotlin 演示应用含MainActivity.kt、ExampleInstrumentedTest.kt与ExampleUnitTest.kt用于在设备上快速验证控件行为。工程的 Gradle 全局配置见 gradle.properties其中org.gradle.jvmargs-Xmx4096m -XX:MaxMetaspaceSize1024m -Dfile.encodingUTF-8第 14 行为 AGP 的 Kotlin 脚本 lint 分析预留了足够堆内存android.useAndroidXtrue与android.enableJetifiertrue第 24–25 行开启 AndroidX 兼容这是 NativeScript 6.x 之后的基础要求。使用 Android Studio 构建替代命令行android/README.md 提供了 IDE 内的构建路径Android Studio 中File → Open选择android/目录左侧 Project 面板选中widgets模块右侧 Gradle 面板进入android/widgets/Tasks/build/执行assembleRelease任务输出位于./android/widgets/build/outputs/。assembleRelease正是build.android.sh背后调用的 Gradle 任务两种方式产出一致。Windows 用户的注意事项原文档明确说明在 Windows 上运行 bash 脚本需要先安装 GIT SCM并改用 Git Bash 执行。即 Windows 开发者应使用 Git Bash 终端来运行build.android.sh以及build.sh而不是 CMD/PowerShell。五、单独构建 iOS./build.ios.sh在 macOS 上可只构建 iOS$ ./build.ios.sh该脚本只构建 Xcode 工程组装./dist/package并打出./dist/tns-core-modules-widgets-*.tgz。原生 iOS 框架产物位于./ios/TNSWidgets/build/TNSWidgets.frameworkTNSWidgets.framework以 framework 形态被 NativeScript 的 iOS 运行时链接其中的 Objective-C 类别与工具类如TNSLabel、UIViewPassThroughParent用于支撑 Text、布局等控件的 UIKit 实现。Xcode 工程结构速览ios/TNSWidgets 目录包含TNSWidgets/核心源码.h/.m文件与Info.plistTNSWidgets.xcodeproj/Xcode 工程文件project.pbxproj与 workspace 配置TNSWidgetsTests/单元测试工程含TNSWidgetsTests.m根目录还有TNSProcess.h/.m与 normalize-xcframework-plist.mjs用于规范化 xcframework 的 plist适配多架构分发。ios/README.md 给出的 IDE 打开方式是Xcode 中File → Open选择ios/TNSWidgets/目录在 Project navigator 中选择TNSWidgets工程。六、在应用中使用通过npm link集成调试构建完成后可以把打包好的插件链接到你的 NativeScript 应用中实现“改原生代码 → 重建 → 立即在应用里验证”的本地迭代闭环。步骤分两步第 1 步在包产物目录注册全局链接在./dist/package目录下执行npm link这会把这个包注册为全局 npm 链接link 的目标是dist/package下的组装产物而不是源码目录本身。第 2 步在应用项目里引用该链接在你的 NativeScript 应用项目根目录执行npm link tns-core-modules-widgets之后应用便会解析到本地构建的原生组件包。每次修改原生代码后都需要重新执行前文提到的构建命令build.sh/build.android.sh/build.ios.sh刷新dist/package产物链接才会反映最新改动——这是该工作流中最重要的习惯。需要说明的是文档中的链接名tns-core-modules-widgets沿用了历史包名当前仓库中该包的正式名称为nativescript/ui-mobile-base见 package.json。实际链接时应以你所依赖的版本所声明的包名为准历史文档中的名称用于理解此链接机制的历史形态。七、工作流要点总结综合原文档与仓库工程配置这套原生组件库的开发工作流可以归纳为四条关键经验按需选择构建粒度全量用./build.shmacOS只改 Android 用./build.android.shUnix/WindowsGit Bash只改 iOS 用./build.ios.shmacOS避免无谓的全平台编译耗时认准产物路径npm 包在./dist/package、tgz 在./dist/tns-core-modules-widgets-*.tgz、Android AAR 在android/widgets/build/outputs/aar/widgets-release.aar、iOS framework 在ios/TNSWidgets/build/TNSWidgets.framework排障与集成时先核对这些位置IDE 与命令行等价Android Studio 的assembleRelease、Xcode 的构建即命令行脚本对应的 GUI 形态二者产出一致可按习惯选择与 monorepo 联动在本仓库Nx 工程中构建还会同步原生平台资源到packages/core/platforms并通过native-state.mjs记录/校验原生状态ensure-native、verify-native目标改原生代码时留意这些联动避免 core 包与原生底座版本漂移。对于希望深入这套构建与原生实现的读者建议从 android/widgets/src/main/java/org/nativescript/widgets 的 Java 布局类与 ios/TNSWidgets 的 Objective-C 类别源码入手配合本文的构建流程即可完整掌握 NativeScript 原生 UI 底座的开发闭环。赞分享【免费下载链接】NativeScript⚡ Write Native with TypeScript ✨ Best of all worlds (TypeScript, Swift, Objective C, Kotlin, Java, Dart). Use what you love ❤️ Angular, React, Solid, Svelte, Vue with: iOS (UIKit, SwiftUI), Android (View, Jetpack Compose), Flutter and you name it compatible.项目地址https://gitcode.com/gh_mirrors/na/NativeScript点击查看免费下载相关推荐一文选对 YOLOv9 五个版本 T/S/M/C/E按算力档位做模型选型的完整指南一文选对 YOLOv9 五个版本 T/S/M/C/E按算力档位做模型选型的完整指南 上周一个朋友问 YOLOv9 版本选型五个版本我该选哪个我随口让他NativeScript ui-mobile-base iOS 工程指南TNSWidgets Xcode 项目解析与构建NativeScript ui mobile base iOS 工程指南TNSWidgets Xcode 项目解析与构建 NativeScript 框架的 i2024年最完整的knowledge_graph入门指南从安装到生成第一个知识图谱2024年最完整的knowledge_graph入门指南从安装到生成第一个知识图谱 knowledge_graph是一个强大的开源工具能够将任何文本转换为知知识图谱人工智能RAG本地部署数据可视化上一篇Rerun C 增量日志Incremental Logging实战同 Archetype 跨帧复用与局部更新下一篇Home Assistant KEF 集成 DSP 刷新指南kef.update_dsp 动作的完整用法与底层原理创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考
网站建设高端定制企业官网
RELATED

相关资讯

更多精彩内容,欢迎继续阅读

较早相关资讯

最新相关资讯

无人机视角森林树桩燃烧图像分类:PyTorch数据集与模型训练实战 2026/10/1 22:38:38

无人机视角森林树桩燃烧图像分类:PyTorch数据集与模型训练实战

简介:面向无人机视角森林桩燃烧识别的图像分类数据集,适合计算机视觉入门及森林防火应用研究。数据已按训练集、测试集两个目录划分并分文件夹保存,每个类别分别存放,类别含燃烧、未燃烧两类,可直接用于YOLOv5分类任务…

阅读更多 →
SSH远程连接替代PuTTY的10大现代终端工具选型指南 2026/10/1 22:38:38

SSH远程连接替代PuTTY的10大现代终端工具选型指南

/* MD / 富文本中的 .toc(含博客园搬家等嵌套结构);.toc-box 在侧栏,不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p(:empty 仍占 20px),一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views …

阅读更多 →
32位MCU跌破0.31元:SOP8封装的国产性价比破局者 2026/10/1 22:38:23

32位MCU跌破0.31元:SOP8封装的国产性价比破局者

1. 这颗“3毛多”的32位MCU,到底值不值得你扔掉手头的8位单片机?最近在几个国产芯片交流群里,几乎每天都有人甩出一张截图:MS32C001B SOP8封装批量单价——0.31元。不是3.1元,不是3.1元起,就是实打实的三毛…

阅读更多 →
航天智能制造规划落地:从89页PPT到可执行方案的关键要点 2026/10/1 22:38:16

航天智能制造规划落地:从89页PPT到可执行方案的关键要点

简介:面向航天制造企业数字化转型的89页PPT规划方案,围绕智能制造从现状诊断到落地实施展开,适合智能制造规划人员、信息化项目管理者及航天行业工艺/制造工程师参考。方案完整呈现业务现状与需求分析、建设目标与预期成效、一体化解决方案、…

阅读更多 →
BongoCat 模型窗口右键拖动缩放:从 ADR-0057 看无重建实时 Resize 的设计与实现 2026/10/1 22:38:16

BongoCat 模型窗口右键拖动缩放:从 ADR-0057 看无重建实时 Resize 的设计与实现

桌面应用 【免费下载链接】BongoCat 🐱 BongoCat — A cross-platform interactive desktop pet that brings fun to your desktop! 项目地址: https://gitcode.com/gh_mirrors/bong/BongoCat 点击查看 免费下载 导读 本文以架构决策记录 ADR-0057&…

阅读更多 →
博学谷Android欢迎页:Eclipse+ADT冷启动白屏与跳转实战 2026/10/1 22:38:16

博学谷Android欢迎页:Eclipse+ADT冷启动白屏与跳转实战

接手一个用 Eclipse 开发的 Android 老工程,第一眼看到的就是欢迎界面——它决定了用户对 App 的第一印象,也决定了你后面几个小时的调试心情。这次要拆的是「博学谷」这个在线学习类 App 的第一屏:基于 Eclipse ADT 的 Android 欢迎界面实战…

阅读更多 →

今日资讯

本周资讯

本月资讯

看完文章仍有疑问?

联系尧图顾问,获取一对一建站咨询

立即免费咨询 📞 400-888-8888
📞 ✉