面向前端开发者的视图标签集成能力：遵循宿主应用视图插槽规范，…

# React Native 0.72：注册“秒杀/直播”原生标签页方案

一、技术选型

• 若项目使用 react-navigation（bottom-tabs）：标签页即屏幕，无需注册原生 tab；直接接入即可。
• 若项目使用自定义 tabBar 组件：需在 tabBar 数据源中扩展两项，并保持高亮/动画逻辑复用。
• 下文按通用思路给出，两种情况均适用。

二、页面组件准备

1. 创建 pages/SeckillScreen 与 pages/LiveScreen，导出为函数组件。

2. 组件内使用 FlatList 承载内容，注意设置 removeClippedSubviews、windowSize 优化长列表性能。

3. 用 React.memo 包裹，避免 tab 切换时不必要的重渲染。

三、注册为标签页

1. 在导航配置（如 Tab.Navigator 的 screen 或 tabBar 数据数组）中插入：

• { name: 'Seckill', component: SeckillScreen, icon: 秒杀图标, label: '秒杀' }
• { name: 'Live', component: LiveScreen, icon: 直播图标, label: '直播' }

2. 若使用 createNativeStackNavigator/bottom-tabs，通过 component 属性挂载即可；自定义 tabBar 则在渲染数组中 map 出新节点。

3. 初始路由按业务需要设置 initialRouteName。

四、接入下划线高亮

1. 利用已有的下划线指示器组件，通过 useLayout 或 onLayout 记录每个 tab 的宽度与 x 坐标。

2. 选中态变化时，用 Animated.Value 将下划线的 translateX 动画到目标位置：

• 使用 Animated.spring 或 Animated.timing，时长建议 200–300ms。

3. 动画配合 useNativeDriver: true，保证 60fps 顺滑。

五、切换动画复用

1. 内容区切换可结合 react-native-pager-view 或 react-native-tab-view，实现滑动联动下划线。

2. 图标/文字高亮用 Animated.interpolate 做颜色与缩放过渡。

3. 保持切换时页面状态不丢失：bottom-tabs 默认懒加载并保留，自定义实现需自行缓存已挂载页面（如 lazy + 已访问标记）。

六、注意事项

• 秒杀页倒计时定时器在页面失焦时暂停（useFocusEffect / blur 事件），避免后台耗电。
• 直播页在 blur 时停止拉流，focus 时恢复。
• 图标资源建议用 SVG，便于做高亮变色动画。
• 新增 tab 后回归测试：iPhone 刘海屏安全区、Android 返回键行为、深色模式。

七、验证清单

• [ ] 两个新 tab 可正常打开与切换
• [ ] 下划线随选中项平滑移动
• [ ] 切换动画与原有 tab 一致
• [ ] 秒杀倒计时/直播流生命周期正确