React Native中如何移除Safari浏览器的下拉刷新加载效果

Safari浏览器的下拉刷新加载器是页面滚动到顶部后继续下拉触发的浏览器原生行为，可通过以下三类方案按需选择移除：

• 方案1：全局CSS禁用过度滚动行为（推荐，适配Safari 15.4+）
  该方案侵入性最低，不影响页面正常滚动逻辑，只需在项目全局样式文件，或入口index.html的style标签中添加如下代码：

  html, body, #app-root {
    overscroll-behavior-y: none;
  }
  

  其中#app-root替换为你项目React Native Web实际挂载的根节点ID，Expo项目默认根节点ID为root。overscroll-behavior-y: none会直接禁用垂直方向滚动到边界后的所有浏览器默认行为，包括下拉刷新、橡皮筋回弹效果。

• 方案2：滚动组件层面单独禁用回弹
  如果不需要全局禁用，仅需在特定页面关闭下拉触发效果，可给页面内使用的ScrollView、FlatList、SectionList等滚动类组件传入如下属性：

  <FlatList
    data={pageData}
    renderItem={renderItem}
    bounces={false}
    overScrollMode="never"
  />
  

  bounces={false}会禁用iOS端（含Safari Web环境）的滚动边界回弹，overScrollMode="never"会同步禁用安卓端Web环境的过度滚动提示，二者搭配即可阻止滚动到顶部时触发浏览器默认刷新。

• 方案3：低版本Safari兼容方案（适配Safari 15.4以下版本）
  overscroll-behavior属性在Safari 15.4版本才正式支持，如需兼容更早版本，可在项目入口组件的挂载生命周期中添加全局事件拦截：

  useEffect(() => {
    const preventTopPullRefresh = (e) => {
      if (window.scrollY <= 0) {
        e.preventDefault();
      }
    };
    document.addEventListener('touchmove', preventTopPullRefresh, { passive: false });
    return () => {
      document.removeEventListener('touchmove', preventTopPullRefresh);
    };
  }, []);
  

  该逻辑仅在页面滚动到顶部位置时，拦截下拉动作的默认行为，不会干扰页面正常滚动、内部滚动容器的交互。

注意：请先排查页面代码中是否手动引入了React Native自带的RefreshControl组件，如果存在该组件引用，需将其refreshing属性固定为false或直接移除组件，否则会出现自定义的下拉刷新控件。

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