【鸿蒙优选三方库】@react-native-ohos/react-native-screens：原生屏幕导航管理

【鸿蒙优选三方库】@react-native-ohos/react-native-screens：原生屏幕导航管理

RN 鸿蒙应用里页面切换卡顿、内存占用高？@react-native-ohos/react-native-screens 用原生屏幕管理替代 JS 视图模拟，导航更流畅、内存更省。

• 包名 ：@react-native-ohos/react-native-screens
• 协议：MIT
• 安装 ：npm install @react-native-ohos/react-native-screens
• 仓库：https://gitcode.com/CPF-RN/rntpc_react-native-screens

---

一、它解决了什么问题？

React Native 的导航方案（如 react-navigation）默认在 JS 层用视图栈模拟页面切换------所有页面都挂载在视图树里，切换时用透明度/位移做动画。问题：

• 内存浪费：不可见的页面也渲染着，10 个页面 = 10 份 UI 在内存里
• 切换卡顿：JS 层动画受线程影响，复杂页面切换掉帧
• 状态混乱：不可见页面的生命周期不明确，容易状态泄漏

react-native-screens 把"屏幕"概念下沉到原生层 ------每个屏幕用原生 Window/Fragment/Stage 管理，不可见时真正从渲染树移除（保留状态），切换时原生动画驱动------内存更省、切换更流畅、生命周期更正确。

---

二、核心特点

特性	说明
原生屏幕管理	用鸿蒙原生 Stage 管理页面，非 JS 模拟
enableScreens	一行开启原生屏幕模式
ScreenContainer / Screen	原生容器 + 屏幕组件
生命周期正确	attach / detach 真实反映可见性
内存优化	不可见屏幕从渲染树移除，保留状态
动画流畅	切换动画在原生层，不受 JS 线程影响
react-navigation 底层依赖	导航库的核心依赖

---

三、适用场景

• 多页面应用：电商（首页→分类→详情→购物车→结算），5+ 层页面。
• Tab 导航：底部 Tab 切换，非活跃 Tab 不渲染。
• StackNavigator：页面栈深度 > 3 时，内存和性能差异明显。
• 从 iOS/Android 迁移到鸿蒙的 RN 应用：react-navigation 已依赖此库。
• 内存敏感场景：低端设备上页面多时避免 OOM。

---

四、快速上手

1. 安装

npm install @react-native-ohos/react-native-screens

2. 开启原生屏幕

import { enableScreens } from '@react-native-ohos/react-native-screens'

enableScreens(true) // 在 App 入口调用，一行开启

3. 配合 react-navigation 使用

import { createNativeStackNavigator } from '@react-navigation/native-stack'
import { NavigationContainer } from '@react-navigation/native'

const Stack = createNativeStackNavigator()

function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="Home" component={HomeScreen} />
        <Stack.Screen name="Detail" component={DetailScreen} />
        <Stack.Screen name="Cart" component={CartScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  )
}

createNativeStackNavigator 底层自动使用 react-native-screens 的原生屏幕------API 不变，性能直接提升。

4. 直接使用 Screen 组件

import { ScreenContainer, Screen } from '@react-native-ohos/react-native-screens'

function CustomNavigator({ activeIndex }: { activeIndex: number }) {
  return (
    <ScreenContainer style={{ flex: 1 }}>
      <Screen active={activeIndex === 0}>
        <HomeScreen />
      </Screen>
      <Screen active={activeIndex === 1}>
        <DetailScreen />
      </Screen>
    </ScreenContainer>
  )
}

---

五、亮点能力速览

• enableScreens(true)：全局一行开启，现有 react-navigation 代码零改动即获性能提升
• 原生动画：push/pop 转场在原生层执行，不受 JS 线程阻塞
• 状态保留 ：freezeOnBlur 让不可见屏幕冻结渲染但保留状态
• 内存控制：不可见屏幕的 View 从原生渲染树 detach，减少 GPU 内存

---

六、版本演进

版本	RN 版本	说明
最新	0.82	兼容 0.82
---	0.77	兼容 0.77
---	0.72	兼容 0.72，支持 Autolink

---

七、为什么值得选它？

1. react-navigation 核心依赖：用导航库就自动依赖它，开启即加速。
2. 内存立竿见影：不可见页面真正移除渲染树，低端机不 OOM。
3. 切换更流畅：原生动画不受 JS 线程影响，复杂页面不掉帧。
4. API 零改动 ：enableScreens(true) 一行开启，现有代码不变。
5. 跨平台一致：iOS/Android/鸿蒙行为统一。

如果你的 RN 鸿蒙应用有 3 个以上页面------@react-native-ohos/react-native-screens 是导航性能的基础设施。