React native：滚动视图刷新控件拉动刷新而不是从顶部刷新

Question

我使用滚动视图在 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>

Answer 1

为 Web 视图添加了 onScroll 方法并获取了 yOffset 并添加了基于此的条件以重新加载 webpage/not

<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)
}

}

React native：滚动视图刷新控件拉动刷新而不是从顶部刷新

React native: Scroll view refresh control pull to refresh not refreshing from top

android

scrollview

webview

pull-to-refresh

react-native