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




