React Native中能否修改ScrollView的scrollEnabled属性而不触发重渲染？

结论：可以实现，核心思路是绕过React的状态更新流程，直接操作ScrollView对应的原生视图实例来修改scrollEnabled属性，完全不会触发任何组件重渲染（包括ScrollView自身的重渲染）。

具体实现逻辑 #

React Native的JS层组件本质是原生视图的封装，我们可以通过UIManager这个底层API直接与原生视图交互，跳过React的状态更新和重渲染机制：

1. 获取ScrollView的原生节点ID
   通过findNodeHandle方法获取目标ScrollView对应的原生节点ID，该方法可接收组件实例作为参数。无需使用useRef，类组件可通过实例属性存储组件引用，函数组件可直接用普通变量存储回调引用。

2. 调用原生API修改属性
   根据平台差异调用对应原生方法：

   • iOS：直接设置原生UIScrollView的isScrollEnabled属性
   • Android：调用原生ScrollView的setEnabled方法

代码示例 #

类组件场景（无useRef/useMemo）

import React, { Component } from 'react';
import { ScrollView, UIManager, findNodeHandle, View, Text, Platform } from 'react-native';

class CustomScrollView extends Component {
  _isScrollEnabled = true;
  scrollView = null;

  toggleScroll = () => {
    const nodeId = findNodeHandle(this.scrollView);
    if (!nodeId) return;

    this._isScrollEnabled = !this._isScrollEnabled;
    if (Platform.OS === 'ios') {
      UIManager.setValue(nodeId, 'isScrollEnabled', this._isScrollEnabled);
    } else {
      UIManager.dispatchViewManagerCommand(
        nodeId,
        UIManager.getViewManagerConfig('ScrollView').Commands.setEnabled,
        [this._isScrollEnabled]
      );
    }
  };

  render() {
    return (
      <>
        <Text onPress={this.toggleScroll}>切换滚动状态</Text>
        <ScrollView
          ref={ref => (this.scrollView = ref)}
          style={{ flex: 1, padding: 20 }}
        >
          {Array.from({ length: 20 }).map((_, idx) => (
            <Text key={idx} style={{ fontSize: 18, marginVertical: 10 }}>
              滚动内容 {idx + 1}
            </Text>
          ))}
        </ScrollView>
      </>
    );
  }
}

函数组件场景（无useRef/useMemo）

import React from 'react';
import { ScrollView, UIManager, findNodeHandle, View, Text, Platform } from 'react-native';

const CustomScrollView = () => {
  let scrollViewInstance = null;
  let isScrollEnabled = true;

  const toggleScroll = () => {
    const nodeId = findNodeHandle(scrollViewInstance);
    if (!nodeId) return;

    isScrollEnabled = !isScrollEnabled;
    if (Platform.OS === 'ios') {
      UIManager.setValue(nodeId, 'isScrollEnabled', isScrollEnabled);
    } else {
      UIManager.dispatchViewManagerCommand(
        nodeId,
        UIManager.getViewManagerConfig('ScrollView').Commands.setEnabled,
        [isScrollEnabled]
      );
    }
  };

  return (
    <>
      <Text onPress={toggleScroll}>切换滚动状态</Text>
      <ScrollView
        ref={ref => (scrollViewInstance = ref)}
        style={{ flex: 1, padding: 20 }}
      >
        {Array.from({ length: 20 }).map((_, idx) => (
          <Text key={idx} style={{ fontSize: 18, marginVertical: 10 }}>
            滚动内容 {idx + 1}
          </Text>
        ))}
      </ScrollView>
    </>
  );
};

关键注意点 #

• 该方式完全绕过React的状态管理流程，修改的是原生视图的直接属性，不会触发任何组件重渲染。
• 需确保操作时组件已挂载（节点ID有效），可结合onLayout事件确保节点初始化完成后再执行修改。
• 不同平台的原生API存在差异，必须做平台判断保证兼容性。

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