React Native如何实现类Android Fragment的页面切换功能

首先要明确：你此前了解的React.Fragment完全不匹配你的功能需求。React.Fragment本质只是一个无额外视图开销的占位聚合组件，作用是把多个同级组件节点包裹起来，避免生成无意义的嵌套View节点，它没有任何页面状态隔离、视图切换、生命周期关联的能力，和Android中承载可切换子界面的Fragment概念没有任何关联。

两种落地路径可以根据你的项目场景选择，都能实现和Android Fragment一致的同容器多子界面切换能力：

• 轻量自实现方案（无第三方依赖）
  核心逻辑和Android Fragment的事务切换逻辑完全对齐：在父级页面组件中维护当前激活的子页面标识状态，根据状态值动态控制对应子组件的渲染/显示状态，所有子组件挂载在同一个固定的父容器区域内完成切换，不会触发整个父页面的重加载。
  核心代码参考：

  import { View, useState } from 'react-native';
  // 父容器组件核心逻辑
  function AppContainer() {
    // 维护当前激活的子页面标识
    const [activePage, setActivePage] = useState('home');
    // 页面切换的触发入口（比如底部导航栏点击、顶部tab点击）直接调用setActivePage更新状态即可
    return (
      <View style={{flex: 1}}>
        {/* 固定容器区域，根据当前状态渲染/隐藏对应子页面 */}
        <View style={{flex: 1}}>
          {/* 保活模式：非激活页面用样式隐藏，保留页面的滚动位置、输入内容等状态 */}
          <View style={{flex: 1, display: activePage === 'home' ? 'flex' : 'none'}}>
            <HomeSubPage />
          </View>
          <View style={{flex: 1, display: activePage === 'profile' ? 'flex' : 'none'}}>
            <ProfileSubPage />
          </View>
        </View>
        {/* 下方的固定导航栏区域不受切换影响 */}
      </View>
    )
  }
  

  这个方案的双端表现完全一致，你可以灵活控制子页面的保活策略、切换动效，不需要受第三方库的限制。
• 成熟导航库内置Tab容器方案
  如果你项目已经接入React Navigation这类通用导航库，可以直接使用库提供的底部Tab、顶部Tab容器能力。这类容器天生就是为同页面内多子界面切换设计的，自带子页面状态保活、滑动切换动效、双端原生体验对齐的能力，不需要从零搭建切换逻辑，最终效果和Android Fragment的使用体验完全对齐。

• 不要尝试把React.Fragment当页面切换容器用：如果把多个子页面直接放在React.Fragment中，组件会一次性把所有子页面全部渲染到页面上，不存在任何切换逻辑，还会直接造成首屏渲染性能浪费
• 自实现切换逻辑时注意内存控制：如果子页面包含长列表、高清大图这类重资源组件，保活状态下要做对应资源的按需释放，避免Android、iOS端出现内存溢出
• 切换动效可以根据平台特性自行调整：Android端可以对齐原生ViewPager的滑动切页手感，iOS端可以对齐原生UIPageViewController的回弹动效，不需要受固定组件库的限制

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