Folo上下文菜单：React Native iOS菜单

Folo上下文菜单：React Native iOS菜单

上下文菜单（Context Menu）是移动应用中提升用户体验的关键交互组件，尤其在iOS平台上，它通过长按操作展示与当前内容相关的快捷功能，帮助用户快速完成任务。本文将详细介绍Folo项目中基于React Native实现的iOS上下文菜单组件，包括核心实现、使用场景和自定义方法。

核心组件架构

Folo的上下文菜单基于zeego/context-menu库构建，通过封装实现了跨平台兼容，并针对iOS系统进行了交互优化。核心代码位于apps/mobile/src/components/ui/context-menu/index.tsx，主要包含以下模块：

1. 基础封装

// apps/mobile/src/components/ui/context-menu/index.tsx import * as ZeegoContextMenu from "zeego/context-menu" const ContextMenuRoot: typeof ZeegoContextMenu.Root = (props) => { return ( <ZeegoContextMenu.Root {...props} onOpenChange={composeEventHandlers(props.onOpenChange, handleContextMenuOpenWithVibration)} > {/* 菜单内容 */} </ZeegoContextMenu.Root> ) } export const ContextMenu = { ...ZeegoContextMenu, Root: ContextMenuRoot, }

2. iOS特有交互

组件针对iOS实现了触觉反馈增强，当菜单打开时触发轻微震动，提升操作感知：

// 震动反馈实现 const handleContextMenuOpenWithVibration = (open: boolean) => { if (!isAndroid) return if (open) { Vibration.vibrate(10) // 10ms轻微震动 } }

图1：iOS上下文菜单触发图标，通常显示为"更多选项"按钮

典型使用场景

1. 时间线视图操作

在内容浏览界面，长按视图切换按钮可打开上下文菜单，快速执行"标记为已读"等操作。相关实现位于apps/mobile/src/modules/screen/TimelineViewSelectorContextMenu.tsx：

// 时间线视图上下文菜单 <ContextMenu.Root> <ContextMenu.Trigger>{children}</ContextMenu.Trigger> <ContextMenu.Content> <ContextMenu.Item key="MarkAsRead" onSelect={() => { unreadSyncService.markViewAsRead(viewId, getHideAllReadSubscriptions()) }} > <ContextMenu.ItemTitle>{t("operation.mark_as_read")}</ContextMenu.ItemTitle> <ContextMenu.ItemIcon ios={{ name: "checkmark.circle" }} /> </ContextMenu.Item> </ContextMenu.Content> </ContextMenu.Root>

2. 菜单图标系统

Folo提供了丰富的SVG图标用于上下文菜单项，位于icons/mgc/目录，常用图标包括：

• check_circle_cute_re.svg- 用于确认操作
• filter_cute_re.svg- 用于筛选功能
• more_1_cute_re.svg- 菜单触发按钮

自定义与扩展

1. 菜单项配置

开发者可通过ContextMenu.Item组件添加自定义操作，支持图标、标题和回调函数：

<ContextMenu.Content> <ContextMenu.Item onSelect={() => handleShare()} icon={ <Image source={require("../../icons/mgc/share_forward_cute_re.svg")} /> } > <ContextMenu.ItemTitle>分享内容</ContextMenu.ItemTitle> </ContextMenu.Item> </ContextMenu.Content>

2. 样式定制

通过修改ContextMenu.Content的样式属性，可调整菜单的外观：

<ContextMenu.Content backgroundColor="#ffffff" borderRadius={12} padding={8} > {/* 菜单项 */} </ContextMenu.Content>

最佳实践

1. 操作优先级

建议将高频操作放在菜单顶部，如"标记为已读"、"分享"等，低频操作如"设置"可放在底部。参考实现：apps/mobile/src/modules/settings/routes/Feeds.tsx

2. 视觉反馈

iOS上下文菜单默认包含弹簧动画和高亮效果，可通过apps/mobile/src/components/ui/pressable/ItemPressable.ios.tsx自定义按压反馈。

总结

Folo的上下文菜单组件通过模块化设计和平台适配，为iOS用户提供了流畅的交互体验。核心代码位于apps/mobile/src/components/ui/context-menu/，结合丰富的图标系统和灵活的自定义能力，可满足不同场景下的功能需求。开发者可参考wiki/contribute-i18n.md文档扩展多语言支持，或通过CONTRIBUTING.md了解贡献指南。

图2：上下文菜单操作流程示意图