企业官网建设流程全解析

原生标签页迁移（SDK 55）

在 SDK 55 中，Label、Icon、Badge和VectorIcon现在作为NativeTabs.Trigger上的静态属性访问，而不是单独的导入。

导入变更

// SDK 53/54 import { NativeTabs, Icon, Label, Badge, VectorIcon, } from "expo-router/unstable-native-tabs"; // SDK 55+ import { NativeTabs } from "expo-router/unstable-native-tabs";

组件变更

SDK 55 新增

BottomAccessory

用于 iOS +26 上 Apple Music 风格迷你播放器的新组件，浮动在标签栏上方：

<NativeTabs> <NativeTabs.BottomAccessory> {/* 标签页上方的内容 */} </NativeTabs.BottomAccessory> <NativeTabs.Trigger name="(index)"> <NativeTabs.Trigger.Label>Home</NativeTabs.Trigger.Label> </NativeTabs.Trigger> </NativeTabs>

在 Android 和 Web 上，此组件将渲染为无操作。请改用绝对定位将视图放置在标签栏上方。

Icon 的md属性

用于 Android 上 Material 图标字形的新md属性（与现有的drawable并列）：

<NativeTabs.Trigger.Icon sf="house" md="home" />

完整迁移示例

之前（SDK 53/54）

import { NativeTabs, Icon, Label, Badge, } from "expo-router/unstable-native-tabs"; export default function TabLayout() { return ( <NativeTabs minimizeBehavior="onScrollDown"> <NativeTabs.Trigger name="(index)"> <Label>Home</Label> <Icon sf="house.fill" /> <Badge>3</Badge> </NativeTabs.Trigger> <NativeTabs.Trigger name="(settings)"> <Label>Settings</Label> <Icon sf="gear" /> </NativeTabs.Trigger> <NativeTabs.Trigger name="(search)" role="search"> <Label>Search</Label> </NativeTabs.Trigger> </NativeTabs> ); }

之后（SDK 55+）

import { NativeTabs } from "expo-router/unstable-native-tabs"; export default function TabLayout() { return ( <NativeTabs minimizeBehavior="onScrollDown"> <NativeTabs.Trigger name="(index)"> <NativeTabs.Trigger.Label>Home</NativeTabs.Trigger.Label> <NativeTabs.Trigger.Icon sf="house.fill" md="home" /> <NativeTabs.Trigger.Badge>3</NativeTabs.Trigger.Badge> </NativeTabs.Trigger> <NativeTabs.Trigger name="(settings)"> <NativeTabs.Trigger.Label>Settings</NativeTabs.Trigger.Label> <NativeTabs.Trigger.Icon sf="gear" md="settings" /> </NativeTabs.Trigger> <NativeTabs.Trigger name="(search)" role="search"> <NativeTabs.Trigger.Label>Search</NativeTabs.Trigger.Label> </NativeTabs.Trigger> </NativeTabs> ); }

迁移检查清单

1. 从导入中移除Icon、Label、Badge、VectorIcon
2. 只保留来自expo-router/unstable-native-tabs的NativeTabs导入
3. 将<Icon />替换为<NativeTabs.Trigger.Icon />
4. 将<Label />替换为<NativeTabs.Trigger.Label />
5. 将<Badge />替换为<NativeTabs.Trigger.Badge />
6. 将<VectorIcon />替换为<NativeTabs.Trigger.VectorIcon />

• 阅读文档了解更多信息 https://docs.expo.dev/versions/v55.0.0/sdk/router-native-tabs/