下拉刷新与scrollView滑动时冲突

[Journey321]

相关平台

React Native

使用框架: React

复现步骤

安卓手机：同一个页面有下拉刷新功能和scrollView，scrollView设置固定屏幕高度，在数据多的时候，往下滑动scrllView时，就会触发下拉刷新。

期望结果

安卓系统：scrollView往下滑动时不要触发下拉刷新

实际结果

scrollView往下滑动时经常触发下拉刷新，严重影响

环境信息

  Taro CLI 3.3.20 environment info:
    System:
      OS: macOS 12.4
      Shell: 5.8.1 - /bin/zsh
    Binaries:
      Node: 14.17.0 - /usr/local/bin/node
      Yarn: 1.22.18 - /usr/local/bin/yarn
      npm: 8.9.0 - /usr/local/bin/npm
    npmPackages:
      @tarojs/cli: 3.3.20 => 3.3.20
      @tarojs/components: 3.3.20 => 3.3.20
      @tarojs/mini-runner: 3.3.20 => 3.3.20
      @tarojs/react: 3.3.20 => 3.3.20
      @tarojs/runtime: 3.3.20 => 3.3.20
      @tarojs/taro: 3.3.20 => 3.3.20
      @tarojs/webpack-runner: 3.3.20 => 3.3.20
      babel-preset-taro: 3.3.20 => 3.3.20
      eslint-config-taro: 3.3.20 => 3.3.20
      react: ^17.0.2 => 17.0.2
      react-native: ^0.67.4 => 0.67.4

[zhiqingchen]

有复现代码或者demo吗

[Journey321]

好的，我写了一个文件，随便复制到项目里运行就可以，里面还附了视频。只有安卓有这个问题，IOS是正常的，有什么问题还请随时联系我。

------------------ 原始邮件 ------------------ 发件人: "NervJS/taro" @.>; 发送时间: 2022年7月21日(星期四) 下午5:16 @.>; @.@.>; 主题: Re: [NervJS/taro] 下拉刷新与scrollView滑动时冲突 (Issue #12086)

有复现代码或者demo吗

— Reply to this email directly, view it on GitHub, or unsubscribe. You are receiving this because you authored the thread.Message ID: @.***>

[zhiqingchen]

文件麻烦提供一下

[Journey321]

文件和视频都在附件里，解压一下。我再发一遍

------------------ 原始邮件 ------------------ 发件人: "NervJS/taro" @.>; 发送时间: 2022年7月21日(星期四) 下午5:44 @.>; @.@.>; 主题: Re: [NervJS/taro] 下拉刷新与scrollView滑动时冲突 (Issue #12086)

文件麻烦提供一下

— Reply to this email directly, view it on GitHub, or unsubscribe. You are receiving this because you authored the thread.Message ID: @.***>

[zhiqingchen]

需要在github上提供，邮件无法提供

[Journey321]

好的，今天下班了，明天我提供一下

发自我的iPhone

------------------ 原始邮件 ------------------ 发件人: tony chen @.> 发送时间: 2022年7月21日 18:15 收件人: NervJS/taro @.> 抄送: Journey321 @.>, Author @.> 主题: Re: [NervJS/taro] 下拉刷新与scrollView滑动时冲突 (Issue #12086)

[Journey321]

安卓-下拉刷新与scrollView滚动冲突.zip 文件和视频在这里

[zhiqingchen]

需要把两层 scrollview 都加上 nestedScrollEnabled: true。 @tarojs/runtime-rn 包可以先打个补丁。

        <ScrollView
          nestedScrollEnabled={true}
          style={{height:(300)}}>
          
          <View className="content">
            <Block>
              {this.state.orderList.map((item, index) => {
                return (
                  <View style="height:100px;border:2px solid red">
                    <Text>{index}</Text>
                  </View>
                )
              })}
            </Block>
          </View>
        </ScrollView>

diff --git a/node_modules/@tarojs/runtime-rn/dist/page.js b/node_modules/@tarojs/runtime-rn/dist/page.js
index b9dfd6f..4994f5b 100644
--- a/node_modules/@tarojs/runtime-rn/dist/page.js
+++ b/node_modules/@tarojs/runtime-rn/dist/page.js
@@ -414,7 +414,7 @@ export function createPageConfig(Page, pageConfig) {
                     bgColor = windowOptions === null || windowOptions === void 0 ? void 0 : windowOptions.backgroundColor;
                 }
                 const refresh = this.isEnablePullDown() ? { refreshControl: this.refreshPullDown() } : {};
-                return h(ScrollView, Object.assign(Object.assign({ style: [{ flex: 1 }, (bgColor ? { backgroundColor: bgColor } : {})], contentContainerStyle: useNativeStack ? {} : { minHeight: '100%' }, ref: this.pageScrollView, scrollEventThrottle: 8 }, refresh), { onScroll: (e) => this.onPageScroll(e), onMomentumScrollEnd: (e) => this.onReachBottom(e) }), this.createPage());
+                return h(ScrollView, Object.assign(Object.assign({ style: [{ flex: 1 }, (bgColor ? { backgroundColor: bgColor } : {})], contentContainerStyle: useNativeStack ? {} : { minHeight: '100%' }, ref: this.pageScrollView, scrollEventThrottle: 8 }, refresh), { onScroll: (e) => this.onPageScroll(e), onMomentumScrollEnd: (e) => this.onReachBottom(e), nestedScrollEnabled: true }), this.createPage());
             }
             render() {
                 const { disableScroll = false } = pageConfig;

参考： https://www.react-native.cn/docs/scrollview#nestedscrollenabled-android

[zhiqingchen]

https://www.npmjs.com/package/patch-package

[fanlvwen]

/node_modules/@tarojs/runtime-rn/dist/page.js

@zhiqingchen 好像没有发布出来，3.6.6还是没有nestedScrollEnabled={true}

[fanlvwen]

需要把两层 scrollview 都加上 nestedScrollEnabled: true。 @tarojs/runtime-rn 包可以先打个补丁。

        <ScrollView
          nestedScrollEnabled={true}
          style={{height:(300)}}>
          
          <View className="content">
            <Block>
              {this.state.orderList.map((item, index) => {
                return (
                  <View style="height:100px;border:2px solid red">
                    <Text>{index}</Text>
                  </View>
                )
              })}
            </Block>
          </View>
        </ScrollView>

diff --git a/node_modules/@tarojs/runtime-rn/dist/page.js b/node_modules/@tarojs/runtime-rn/dist/page.js
index b9dfd6f..4994f5b 100644
--- a/node_modules/@tarojs/runtime-rn/dist/page.js
+++ b/node_modules/@tarojs/runtime-rn/dist/page.js
@@ -414,7 +414,7 @@ export function createPageConfig(Page, pageConfig) {
                     bgColor = windowOptions === null || windowOptions === void 0 ? void 0 : windowOptions.backgroundColor;
                 }
                 const refresh = this.isEnablePullDown() ? { refreshControl: this.refreshPullDown() } : {};
-                return h(ScrollView, Object.assign(Object.assign({ style: [{ flex: 1 }, (bgColor ? { backgroundColor: bgColor } : {})], contentContainerStyle: useNativeStack ? {} : { minHeight: '100%' }, ref: this.pageScrollView, scrollEventThrottle: 8 }, refresh), { onScroll: (e) => this.onPageScroll(e), onMomentumScrollEnd: (e) => this.onReachBottom(e) }), this.createPage());
+                return h(ScrollView, Object.assign(Object.assign({ style: [{ flex: 1 }, (bgColor ? { backgroundColor: bgColor } : {})], contentContainerStyle: useNativeStack ? {} : { minHeight: '100%' }, ref: this.pageScrollView, scrollEventThrottle: 8 }, refresh), { onScroll: (e) => this.onPageScroll(e), onMomentumScrollEnd: (e) => this.onReachBottom(e), nestedScrollEnabled: true }), this.createPage());
             }
             render() {
                 const { disableScroll = false } = pageConfig;

参考： https://www.react-native.cn/docs/scrollview#nestedscrollenabled-android

[lovelyqun]

vue3 也有这个为,如何修复?