Skip to content
This repository was archived by the owner on Jan 14, 2026. It is now read-only.
This repository was archived by the owner on Jan 14, 2026. It is now read-only.

@react-navigation/stack 导致页面严重卡顿 #45

@hyfjjjj

Description

@hyfjjjj

描述 / Description

当使用 @react-navigation/stackcreateStackNavigator 生成的 Stack.Navigator 作为页面根节点时,内部如果有一些页面,每个页面有几十个 view,然后开始频繁进行一些操作,包括滑动 scrollview,来回切换 segmented-control 等来滑动页面,修改页面,很短时间后页面会变得非常卡顿,连 scrollview 上下滑动都变得困难。

经测试发现,是 src/views/GestureHandlerNative.tsx 导致的,主要是下面的代码:

export function PanGestureHandler(props: PanGestureHandlerProperties) {
  const gestureRef = React.useRef<PanGestureHandlerNative>(null);

  return (
    <GestureHandlerRefContext.Provider value={gestureRef}>
      <PanGestureHandlerNative {...props} ref={gestureRef} />
    </GestureHandlerRefContext.Provider>
  );
}

export {
  GestureHandlerRootView,
  State as GestureState,
} from 'react-native-gesture-handler';

其中的 GestureHandlerRootView 用在了 src/views/Stack/StackView.tsx 中,用作为了组件的根节点。当使用 GestureHandlerRootView 作为根节点时,简单操作后就会卡顿,还没有仔细研究具体原因,猜测是添加了大量的 listener 没有释放导致,将上述代码改为:

import { View } from 'react-native';

export function PanGestureHandler(props: PanGestureHandlerProperties) {
  return props.children;
}
export const GestureHandlerRootView = View;

之后,去掉了对 gesture 的监听,就会在大量操作后完全不卡顿,也没有发现影响功能。

复现步骤 / Steps to reproduce

No response

库版本 / Library version

"@react-native-oh-tpl/stack": "^6.4.0-0.0.4"

React Native OpenHarmony version

0.72.46

构建类型 / Build type

Debug app & dev bundle

设备 / Device

Real device

设备版本 / Device model

Nova 12 Ultra

已悉知 / Acknowledgements

Yes

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions