Expo 52中DOM组件DOMProps属性不生效问题求助

问题描述 #

使用npx create-expo-app@latest创建启用新架构的Expo 52项目，按照官方文档创建DOM组件后，传入dom={{scrollEnabled: false}}属性，组件仍可滚动，DOMProps未生效。

组件代码 #

'use dom';

export default function DOMComponent({}: { dom: import('expo/dom').DOMProps }) {
  return (
    <div>
      <h1>Hello, world!</h1>
    </div>
  );
}

调用代码 #

import DOMComponent from './my-component';

export default function App() {
  return (
    <DOMComponent
      dom={{
        scrollEnabled: false,
      }}
    />
  );
}

问题演示 #

解决办法 #

当前组件仅接收了dom属性，但未将其传递给根DOM元素（<div>）。Expo的DOMProps需要绑定到根节点上才能生效，修改组件代码如下：

'use dom';

export default function DOMComponent({ dom }: { dom: import('expo/dom').DOMProps }) {
  return (
    <div {...dom}>
      <h1>Hello, world!</h1>
    </div>
  );
}

通过扩展运算符{...dom}将dom对象中的所有属性（包括scrollEnabled）传递给根<div>，Expo会识别并应用这些配置，从而禁用组件的滚动功能。

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