如何阻止React Native Web中ScrollView打开Modal时自动滚到底部？

这个现象是React Native Web在处理Modal与ScrollView交互时的焦点默认行为导致的，算不上严格意义上的bug，但确实是Web端特有的适配问题——当Modal打开时，Web端会自动将焦点移到页面内可聚焦元素，而ScrollView底部的Pressable刚好是最后一个可聚焦元素，就会触发ScrollView自动滚动到底部来让该元素进入视口。

解决方案 #

• 给Pressable添加focusable={false}属性：如果这个Pressable不需要获取焦点（比如只是普通按钮交互），直接禁用它的可聚焦性，这样Modal打开时就不会自动聚焦到它，ScrollView也就不会滚动了。

  <Pressable focusable={false} onPress={/* 你的点击逻辑 */}>
    {/* 按钮内容 */}
  </Pressable>
  

• 手动控制ScrollView的滚动位置：在Modal打开后，调用ScrollView的scrollTo方法回到顶部或指定位置。需要先给ScrollView绑定ref：

  const scrollRef = useRef(null);
  
  const openModal = () => {
    setModalVisible(true);
    scrollRef.current?.scrollTo({ y: 0, animated: false });
  };
  
  <ScrollView ref={scrollRef}>
    {/* ScrollView内容 */}
  </ScrollView>
  

• 给Modal添加autoFocus={false}：部分场景下，禁用Modal的自动聚焦行为也能解决问题，但这个属性可能影响Modal的无障碍访问，需要根据需求权衡。

总结 #

这不是你的代码逻辑问题，是React Native Web在Web平台焦点处理上的适配差异。优先用第一种方案，既简单又不会影响其他功能。

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