apps/docs/content/docs/cn/native/releases/v1-0-2.mdx
HeroUI Native v1.0.2 为 PressableFeedback 与 Surface 引入 asChild 插槽模式,为所有基于 Portal 的遮罩组件增加 VoiceOver 模态包容支持,并修复 Android 上 Button 某变体的样式问题。本版本还微调了 Input 与 Select 的视觉效果,并在 RadioGroup 文档中内嵌 API 参考表。
升级到最新版本:
<Tabs items={["npm", "pnpm", "yarn", "bun"]}> <Tab value="npm">
npm i heroui-native
通过预览应用在真机上体验 v1.0.2 的全部改进!你可以探索新的 asChild 插槽模式、Portal 无障碍改进、Android 上更可靠的 Button 行为,以及优化后的 Input 与 Select 样式。
请确保手机已安装最新版本的 Expo Go。
方式一:扫描二维码
使用手机相机或 Expo Go 应用扫描:
<div className="flex justify-center my-6"> </div>Android 用户请注意: 若使用系统相机或其他扫码应用会跳转到浏览器并出现 404,请先打开 Expo Go,使用其内置扫码功能扫描。
方式二:点击链接
若设备已安装 Expo Go,将自动在其中打开应用。
asChild 插槽模式PressableFeedback 与 Surface 现支持 asChild 属性,采用 Slot 模式实现多态渲染。当 asChild 为 true 时,组件会把自身行为与样式合并到单个子元素上,而不再额外包一层节点。
PressableFeedback 使用 Animated.createAnimatedComponent(Slot.Pressable),将按压处理与动画样式合并到子元素。Surface 使用 Slot.View,将表面样式(海拔、背景、className)合并到子元素。
新能力:
import { PressableFeedback, Surface } from "heroui-native";
// PressableFeedback 将按压处理合并到子元素
<PressableFeedback asChild onPress={() => console.log("pressed")}>
<MyCustomComponent />
</PressableFeedback>
// Surface 将表面样式合并到子元素
<Surface asChild elevation={2}>
<MyCustomCard />
</Surface>
asChild 默认为 false,保持既有行为,无需迁移。启用 asChild 时子节点须为单个 React 元素。两处实现均遵循代码库中已有的 Slot 原语模式。
相关 PR: #380
unstable_accessibilityContainerViewIsModal所有基于 Portal 的遮罩组件新增 unstable_accessibilityContainerViewIsModal 属性,用于控制 iOS VoiceOver 是否将遮罩窗口视为模态容器。启用后,VoiceOver 焦点限制在遮罩内,无法导航到背后内容。
支持的组件:
BottomSheet.Portal)Dialog.Portal)Menu.Portal)Popover.Portal)Select.Portal)ToastProvider)新能力:
import { Dialog } from "heroui-native";
<Dialog>
<Dialog.Portal unstable_accessibilityContainerViewIsModal>
<Dialog.Content>
</Dialog.Content>
</Dialog.Portal>
</Dialog>
该属性默认为 false,保持既有行为。标记为 unstable 是因为它直接映射到 react-native-screens 中 FullWindowOverlay 的原生 accessibilityViewIsModal,未来可能随该库版本变化。
相关 PR: #383
优化了 Input 与 Select 的视觉样式,使外观更干净、比例更协调。
调整:
border-2(2px)改为 border-[1.5px],边框更轻、不抢眼py-3.5 改为 py-3,布局更紧凑以上均为纯视觉调整,无 API 或行为变更。建议在 iOS 与 Android 上做视觉回归确认。
相关 PR: #381
本版本包含以下修复:
Issue #363:修复 Android 上 Button 的 outline 变体在通过条件属性切换到其他变体时边框仍残留的问题。Android 上的 React Native 在变体切换时有时会保留 borderWidth。除 outline 外的所有按钮变体现均包含显式 border-0 类,确保变体切换时将 borderWidth 重置为 0。
Issue #357:响应在 Card 上支持 asChild 以实现可按压卡片模式的诉求。PressableFeedback 与 Surface 上的新 asChild 插槽模式,使开发者可将按压与表面样式合并到单个子元素,无需额外包装节点。
相关 PR:
RadioGroup 文档现于页面内嵌 Radio、Radio.Indicator、Radio.IndicatorThumb 的完整 API 表,读者无需再跳转到单独的 Radio 文档即可了解在 RadioGroup.Item 中组合时的可用属性。
改进:
Radio、Radio.Indicator、Radio.IndicatorThumb 的完整属性表内嵌展示RadioRenderProps、RadioRootAnimation、RadioIndicatorThumbAnimation 类型说明相关 PR: #384
以下文档页面已随本版本更新:
Radio、Radio.Indicator、Radio.IndicatorThumbasChild 属性说明asChild 属性说明unstable_accessibilityContainerViewIsModal 说明感谢所有为本版本做出贡献的朋友!