




资源介绍
视频数量:13个
总时长:29分
课程介绍:
React Native跨平台小组件开发实战
拿起手机点亮屏幕,滑动到主页面那一瞬间,你最先看到的往往不是某个App的图标,而是散落在各处的天气信息、待办事项、日历提醒、步数统计。这些内容不需要你点开任何应用,不需要等待加载,就那么静静地躺在屏幕上。这就是小组件的价值,它不是锦上添花的功能,而是让一款App真正渗透进用户日常生活的入口。
然而对于React Native开发者来说,小组件始终是心中的一根刺。iOS端的小组件基于SwiftUI,Android端的则依赖Jetpack Compose,两套技术栈、两门编程语言、同一个功能却要维护两套代码。光是想想这个成本,很多团队就果断选择了放弃。Ultra框架的出现打破了这个僵局,它允许开发者完全使用React Native来同时为iOS和Android构建真正的主屏幕小组件。代码写一份,运行时它会在iOS上变成原生的WidgetKit扩展,在Android上变成原生的Glance Widget。不需要碰Swift,也不需要写Kotlin。这门课就是带你把这件事从头到尾做一遍。
一、课程整体规划与目录设计
课程开始,老师会从产品视角带你理解为什么小组件值得投入精力,以及Ultra框架背后的设计哲学。随后一起规划项目的文件夹结构。这一步看似简单,其实决定了你后面所有代码的组织方式。老师会演示如何在React Native项目中规划visits、primitives、variants这几个核心目录,让你从一开始就把代码结构理清楚,避免后续越写越乱。
二、环境搭建与脚手架准备
结构规划好之后,就进入实际的搭建环节。老师会带你完成项目的基础脚手架配置,包括依赖安装、配置文件修改、必要的原生端链接设置。这部分内容虽然不算复杂,但很多新手恰恰会卡在环境配置这一步。老师会把容易出问题的环节提前点出来,让你少走弯路。
三、iOS端小组件开发
iOS部分是整个课程的重点之一,老师会循序渐进地拆解每一个步骤。
首先是开发iOS的原子组件(primitives)。所谓原子组件,就是那些可以在小组件里被反复复用的小积木,比如Logo标记、背景色块、字体样式、消息气泡等。老师会带你逐一实现这些基础组件,并展示如何用Voltra提供的iOS命名空间来调用原生API。通过这些练习,你会理解为什么把小组件拆分成原子组件是更优雅的做法,日后修改样式或者更换主题,只需要改一处即可。
原子组件完成后,就到了变体(variants)的开发阶段。这里会分别实现iOS小组件的小、中、大三种尺寸。不同尺寸的小组件能展示的信息量和布局方式都不同,老师会一一演示如何利用前面封装好的原子组件来组合出不同尺寸的变体,让你理解尺寸适配背后的设计思路。
接下来是开发iOS的工厂函数(factory function)。工厂函数是Ultra框架的核心机制之一,它负责把你在React Native中定义的小组件组件映射到iOS的WidgetKit扩展。老师会详细讲解工厂函数的参数含义、配置项,以及它是如何与React Native侧的组件进行通信的。
工厂函数写好之后,老师还会带你创建小组件的桶导出文件(barrel export),并添加插件配置。桶导出能让其他文件方便地引用小组件模块,而插件配置则是把整个React Native侧的小组件代码正确链接到iOS原生工程的关键步骤。这两步做完,iOS端的小组件就基本成型了。
四、Android端小组件开发
完成iOS端之后,课程转入Android端的开发。这一部分老师会延续同样的思路,让你感受Ultra框架在两个平台上的对称设计。
首先开发Android端的共享原子组件。老师会演示如何在Android文件夹下创建对应的primitives文件,并使用Voltra android命名空间来调用Android原生的API。虽然iOS和Android两个平台的API命名不同,但开发模式几乎一致,你之前在iOS端积累的经验可以直接复用。
然后是开发Android小组件的变体。这里同样会实现小、中、大三种尺寸的Android小组件。老师会重点讲解Android小组件特有的属性,比如deepLinkUrl的绑定方式,以及如何处理Android小组件的布局约束。
接下来是绑定Android小组件服务(Widget Service)。这是Android端特有的步骤,老师会手把手教你如何在原生Android工程中注册小组件服务,配置RemoteViews的布局,并确保React Native侧渲染出的组件能正确传递到原生层。
最后一步是映射Android小组件。这一步相当于iOS端工厂函数在Android上的对应实现。老师会带你完成最终的映射配置,让React Native中定义的组件真正成为一个可以在Android主屏幕上显示的Glance Widget。
五、适合谁来学
如果你是React Native开发者,曾经苦恼于小组件开发需要切换到SwiftUI或Jetpack Compose,这门课就是为你准备的。如果你是独立开发者,想要为自己的App快速添加跨平台的小组件支持,跟着这门课跑一遍就能打通完整流程。如果你是技术负责人,正在评估团队是否值得投入小组件开发,这门课能让你在最短时间内看清整个技术方案的可行性和实际工作量。
整门课只有二十九分钟,没有废话,每一分钟都聚焦在一个具体的技术动作上。看完之后你会拥有一套完整的跨平台小组件开发模板,无论后续要做什么样的Widget,都可以基于这套模板快速扩展。把课程中学到的工程化思路搬到自己的项目里,你的App就能真正"住进"用户的主屏幕,而不是静静躺在应用列表里等待被点开。