React Native中如何为两类不同用户配置页面与导航路由

场景最优实现方案 #

不需要拆分8个独立页面，也不需要维护两套完全独立的导航栈，更推荐**「公共导航复用+页面逻辑分层」**的方案，兼顾可维护性和扩展性，具体实现逻辑如下：

核心实现思路 #

• 导航层直接复用一套底部Tab导航即可，4个公共页面对应的入口组件保持不变，不需要额外拆分导航栈。如果后续两类用户的Tab结构出现差异（比如健康合作方多出专属功能Tab），再做导航栈的条件渲染即可。
• 每个页面做三层拆分，实现公共逻辑复用、业务逻辑解耦：
  1. 入口公共逻辑层：统一放在页面对应的入口组件中，处理两类用户通用的逻辑，比如页面埋点上报、通用配置拉取、权限校验等，避免重复开发
  2. 分用户视图层：将两类用户的UI和专属业务逻辑拆成独立的子组件，比如首页对应拆分HomeCustomer（普通客户视图）和HomePartner（健康合作方视图），两个组件完全解耦，各自维护内部逻辑，不会互相影响
  3. 通用组件库：如果两类用户视图存在可复用的元素（比如通知卡片、列表项、操作按钮等），统一抽成公共组件，两边均可调用，减少代码冗余

代码示例（首页入口） #

import { useEffect } from 'react'
import { useUserStore } from '@/stores/user'
import HomeCustomer from './components/HomeCustomer'
import HomePartner from './components/HomePartner'
import { trackPageView, fetchCommonConfig } from '@/utils/common'

const HomeScreen = () => {
  // 从全局状态取当前用户类型，枚举值为 customer / partner
  const { userType } = useUserStore()

  // 公共逻辑统一处理
  useEffect(() => {
    trackPageView('home_screen')
    fetchCommonConfig()
  }, [])

  // 根据用户类型渲染对应视图
  return userType === 'customer' ? <HomeCustomer /> : <HomePartner />
}

export default HomeScreen

其他方案对比 #

• 两套独立导航栈+8个独立页面：冗余代码量直接翻倍，后续修改公共逻辑需要同时修改多份代码，维护成本极高，不推荐
• 两类用户逻辑写在同一个页面组件内：后续迭代过程中会出现大量的if/else判断逻辑，代码快速膨胀，排查问题难度高，多成员协作时容易出现代码冲突，不推荐

本方案的扩展性也更强，后续如果新增第三类用户，只需要新增对应视图组件即可，导航层和公共逻辑不需要做任何调整。

内容的提问来源于stack exchange，提问作者user14877357