时间戳

首页 > 解决方案 > 反应原生：滚动视图刷新控制拉刷新不从顶部刷新

android - 反应原生：滚动视图刷新控制拉刷新不从顶部刷新

问题描述

我使用滚动视图添加了拉动以刷新 Web 视图。它正在工作，但条件是只有当我们位于 Web 视图内的页面顶部时，拉动刷新才能工作。这是我的代码

<ScrollView
  contentContainerStyle={{flex: 1}}
  refreshControl={
    <RefreshControl
      refreshing={refreshing}
      onRefresh={onRefresh}
    />
  }
>
<WebView scalesPageToFit
    startInLoadingState
    ref = {webViewRef}
    originWhitelist={['*']}
    style={{ flex: 1 }} source={{ uri: url  }} onLoadStart={() => (setLoading(true))} onLoadEnd={() => (setLoading(false))}
    javaScriptEnabled={true}
    domStorageEnabled={true}
    setSupportMultipleWindows={false}
    />
    </ScrollView>

标签： androidreact-nativewebviewscrollviewpull-to-refresh

解决方案

为 web 视图添加了 onScroll 方法并获得了 yOffset 并在此基础上添加了条件以重新加载网页/不

<WebView scalesPageToFit
startInLoadingState
ref = {webViewRef}
originWhitelist={['*']}
style={{ flex: 1 }} source={{ uri: url  }} onLoadStart={() => (setLoading(true))} onLoadEnd={() => (setLoading(false))}
javaScriptEnabled={true}
domStorageEnabled={true}
setSupportMultipleWindows={false}
onScroll={handleScroll}
/>

和方法

const handleScroll = (event) =>  {
console.log(Number(event.nativeEvent.contentOffset.y))
const yOffset = Number(event.nativeEvent.contentOffset.y)
if (yOffset === 0){
  console.log('top of the page')
  handleRefresh(true)
}else{
  handleRefresh(false)
}

}

推荐阅读