You need to enable JavaScript to run this app.
最新活动
大模型
产品
解决方案
定价
生态与合作
支持与服务
开发者
了解我们

React Native iOS端RefreshControl渲染于ScrollView内容后方的解决方案求助

React Native iOS端RefreshControl渲染于ScrollView内容后方的解决方案求助

大家好!我最近在做React Native项目时遇到了一个iOS端专属的头疼问题,想请教下有没有大佬有解决思路🥺

我当前用的是react-native@0.76.9,需求是在嵌套了WebView的ScrollView中,通过progressViewOffset让下拉刷新的指示器偏移一段距离(示例里用了200做演示)。Android上的表现完全符合预期:指示器能在设置的偏移位置显示,而且清晰地在WebView内容上方;但iOS这边就很离谱——偏移确实生效了,可指示器直接渲染到WebView内容的后面,完全看不到!

我已经试过几种方案,但都走不通:

  • 尝试用contentOffset + contentInset组合:这会把WebView整体往下推,相当于给内容加了个顶部内边距,而且因为WebView本身自带滚动,父ScrollView的滚动行为会和WebView的滚动冲突,页面滑动体验特别差;
  • 给RefreshControl添加绝对定位、z-index这类样式:完全没效果,iOS好像根本不识别RefreshControl上的这些样式配置。

下面是我当前的核心代码:

<ScrollView 
  contentContainerStyle={{ flex: 1 }} 
  refreshControl={
    <RefreshControl 
      enabled={pullToRefresh && isScrollToTop}
      tintColor={colors.Neutrals.N1}
      colors={[colors.Neutrals.N1]}
      onRefresh={onRefresh} // 触发WebView刷新
      refreshing={isRefreshing}
      progressViewOffset={200} // 演示用的偏移值
    />
  }
>
  <WebView 
    ref={webViewRef}
    source={{ uri: webViewUri }}
    onMessage={onMessage}
    onLoadEnd={() => {
      setIsRefreshing(false);
      setWebViewLoaded(true);
    }}
  />
</ScrollView>

我还特意截了两端的表现截图:Android端的偏移指示器清晰可见,而iOS端的指示器虽然偏移到位,但完全被WebView内容挡住了。

有没有大佬遇到过类似的问题?或者有没有什么原生配置、RN的隐藏API,或者替代的实现方式能让iOS端的RefreshControl指示器渲染在内容上方?折腾好几天了都没搞定,真心求支招!

内容来源于stack exchange

火山引擎 最新活动