React Native下拉子菜单实现：适配TypeScript与React Navigation技术栈

适配场景：基于TypeScript开发、使用React Navigation v6+作为路由方案的React Native项目，无需引入额外第三方下拉组件库

实现核心逻辑 #

• 全流程TS类型约束，覆盖菜单配置、路由跳转全链路的类型安全
• 菜单组件与现有导航栈完全解耦，不改动原有路由注册结构
• 交互对齐移动端通用下拉菜单体验：父级菜单点击展开/收起子项、点击非菜单区域自动收起、选中项状态高亮

分步实现指引 #

• 步骤1：定义统一的菜单数据类型

  type NavMenuItem = {
    id: string;
    label: string;
    icon?: React.ReactNode;
    navigateTarget?: string; // 对应React Navigation已注册的路由名称
    children?: NavMenuItem[]; // 存在该字段即为可展开的父级菜单
  }
  

• 步骤2：组件状态与导航对接
  • 通过useState维护两个核心状态：当前展开的父菜单ID、当前选中的菜单ID
  • 点击父级菜单时切换展开/收起状态，全局仅保留一个父菜单处于展开态
  • 调用useNavigation钩子获取导航实例，点击叶子菜单时直接触发路由跳转，完全复用现有React Navigation的导航逻辑
• 步骤3：交互细节打磨
  • 展开的子菜单使用绝对定位悬浮在页面上层，搭配半透明遮罩层响应点击收起操作
  • 每个菜单项设置48px以上的最小触摸响应区域，避免移动端误触

落地注意事项 #

• 所有菜单配置必须严格匹配定义的NavMenuItem类型，从开发阶段规避未注册路由跳转、菜单层级错位的问题
• 菜单组件可直接嵌入自定义头部、侧边栏、页面操作区等任意位置，无需额外嵌套导航容器

内容的提问来源于stack exchange，提问作者Luís Garcés