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

【问题标题】：React native: Scroll view refresh control pull to refresh not refreshing from top反应原生：滚动视图刷新控制拉刷新不从顶部刷新
【发布时间】：2021-10-24 11:45:20
【问题描述】：

我添加了拉动以使用滚动视图刷新内部 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>

【问题讨论】：

标签： android react-native webview scrollview pull-to-refresh

【解决方案1】：

为网页视图添加了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)
}

}

【讨论】：