fix:修复使用react-native-largelist数据列表懒加载展示不全问题 (#27)

yuangerep · web-flow · commit 11cf9a2d2e52 · 2024-10-18T19:07:22.000+08:00
Signed-off-by: wupingyuan &lt;wupingyuan2@h-partners.com&gt;
diff --git a/harmony/spring_scrollview/src/main/cpp/SpringScrollViewComponentInstance.cpp b/harmony/spring_scrollview/src/main/cpp/SpringScrollViewComponentInstance.cpp
@@ -239,4 +239,24 @@ void SpringScrollViewComponentInstance::finalizeUpdates() {
     this->getLocalRootArkUINode().init();
 }
 
+void SpringScrollViewComponentInstance::sendEventAnimationsOnScroll(
+        facebook::react::RNCSpringScrollViewEventEmitter::OnScroll onScroll) {
+        auto nativeAnimatedTurboModule = m_springNativeAnimatedTurboModule.lock();
+        if (nativeAnimatedTurboModule == nullptr) {
+            auto instance = m_deps->rnInstance.lock();
+            if (instance == nullptr) {
+                   return;
+            }
+            nativeAnimatedTurboModule =
+                instance->getTurboModule<NativeAnimatedTurboModule>("NativeAnimatedTurboModule");
+            m_springNativeAnimatedTurboModule = nativeAnimatedTurboModule;
+        }
+        if (nativeAnimatedTurboModule != nullptr) {
+            using folly::dynamic;
+            dynamic payload = dynamic::object("contentOffset",dynamic::object("x",onScroll.contentOffset.x)("y",onScroll.contentOffset.y)("refreshStatus",onScroll.refreshStatus)("loadingStatus",onScroll.loadingStatus));
+            nativeAnimatedTurboModule->handleComponentEvent(m_tag, "onScroll",payload);
+            DLOG(INFO) << "SpringScrollViewComponentInstance::sendEventAnimationsOnScroll y " << onScroll.contentOffset.y;
+        }
+}
+
 } // namespace rnoh
diff --git a/harmony/spring_scrollview/src/main/cpp/SpringScrollViewComponentInstance.h b/harmony/spring_scrollview/src/main/cpp/SpringScrollViewComponentInstance.h
@@ -31,6 +31,7 @@
 #include "ShadowNodes.h"
 #include "Types.h"
 #include <react/renderer/core/LayoutContext.h>
+#include "RNOHCorePackage/TurboModules/Animated/NativeAnimatedTurboModule.h"
 
 namespace rnoh {
 class SpringScrollViewComponentInstance : public CppComponentInstance<facebook::react::RNCSpringScrollViewShadowNode>,
@@ -54,6 +55,7 @@ class SpringScrollViewComponentInstance : public CppComponentInstance<facebook::
     bool swiperStatus = false;
     facebook::react::Size m_containerSize;
     facebook::react::Size m_contentSize;
+    std::weak_ptr<NativeAnimatedTurboModule> m_springNativeAnimatedTurboModule{};
 public:
     SpringScrollViewComponentInstance(Context context);
     void onChildInserted(ComponentInstance::Shared const &childComponentInstance, std::size_t index) override;
@@ -81,6 +83,7 @@ class SpringScrollViewComponentInstance : public CppComponentInstance<facebook::
     void callArkTSReboundStart(float f, float t, long d,bool isVertical) override;
     facebook::react::Point getCurrentOffset() const override;
     bool isHandlingTouches() const override;
+    void sendEventAnimationsOnScroll(facebook::react::RNCSpringScrollViewEventEmitter::OnScroll onScroll) override;
 };
 } // namespace rnoh
 #endif // HARMONY_SpringScrollViewCOMPONENTINSTANCE_H
diff --git a/harmony/spring_scrollview/src/main/cpp/SpringScrollViewNode.cpp b/harmony/spring_scrollview/src/main/cpp/SpringScrollViewNode.cpp
@@ -401,8 +401,9 @@ void SpringScrollViewNode ::setContentOffset(float x, float y) {
         ArkUI_AttributeItem translateItem = {translateValue.data(), translateValue.size()};
     NativeNodeApi::getInstance()->setAttribute(m_stackArkUINodeHandle, NODE_TRANSLATE, &translateItem);
     facebook::react::RNCSpringScrollViewEventEmitter::OnScroll onScroll = {
-        {contentOffset.x / 2, contentOffset.y / 2}, refreshStatus, loadingStatus};
+        {contentOffset.x , contentOffset.y }, refreshStatus, loadingStatus};
     m_scrollNodeDelegate->onScroll(onScroll);
+    m_scrollNodeDelegate->sendEventAnimationsOnScroll(onScroll);
     DLOG(INFO) << "SpringScrollViewNode setContentOffset loadingStatus:" << loadingStatus
                << " refreshStatus:" << refreshStatus << " contentOffset.y " << contentOffset.y << " contentOffset.x "
                << contentOffset.x;
diff --git a/harmony/spring_scrollview/src/main/cpp/SpringScrollViewNode.h b/harmony/spring_scrollview/src/main/cpp/SpringScrollViewNode.h
@@ -58,6 +58,7 @@ class SpringScrollViewNodeDelegate {
     virtual void callArkTSInnerStart(float f,  float v0,  float d, float lower, float upper, bool pagingEnabled, float pageSize,bool isVertical){};
     virtual void callArkTSOuterStart(float f, float v0, float d,bool isVertical){};
     virtual void callArkTSReboundStart(float f, float t, long d,bool isVertical){};
+    virtual void sendEventAnimationsOnScroll(facebook::react::RNCSpringScrollViewEventEmitter::OnScroll onScroll){};
 };
 
 class SpringScrollViewNode : public ArkUINode, public EventBus::EventHandler<SpringScrollViewEvent> {
diff --git a/src/NormalFooter.js b/src/NormalFooter.js
@@ -43,76 +43,88 @@ export class NormalFooter extends LoadingFooter {
 
   startLoadAnimation = () => {
     this.loadingAnimation.setValue(0);
-    Animated.timing(this.loadingAnimation, {
-      toValue: 1,
-      duration: 4000,
-      easing: Easing.linear,
-      useNativeDriver:false
-    }).start(() => this.startLoadAnimation());
+    Animated.loop(
+      Animated.timing(this.loadingAnimation, {
+        toValue: 1,
+        duration: 1000,
+        easing: Easing.linear,
+        useNativeDriver: true
+      }),
+      { iterations: -1 },
+    ).start();
   }
 
   _renderIcon() {
     const s = this.state.status;
-    if(Platform.OS === "harmony") {
-    this.startLoadAnimation();
-    const rotateValue=this.loadingAnimation.interpolate({
-      inputRange: [0,1],
-      outputRange: ["0deg", "360deg"]
-    })
-    if (s === "loading" || s === "cancelLoading" || s === "rebound") {
-          return <Animated.Image
-        source={require("./Customize/res/icon_load.png")}
-        style={{
-          transform: [
-            {
-              rotate: rotateValue
-            }
-          ]
-        }}
-      />;
+    if (Platform.OS === "harmony") {
+      this.startLoadAnimation();
+      const rotateValue = this.loadingAnimation.interpolate({
+        inputRange: [0, 1],
+        outputRange: ["0deg", "360deg"]
+      })
+      if (s === "loading" || s === "cancelLoading" || s === "rebound") {
+        return <Animated.Image
+          source={require("./Customize/res/icon_load.png")}
+          style={{
+            transform: [
+              {
+                rotate: rotateValue
+              }
+            ]
+          }}
+        />;
+      }
+      const { maxHeight, offset, bottomOffset } = this.props;
+      return (
+        <Animated.Image
+          source={require("./Customize/res/arrow.png")}
+          style={{
+            transform: [
+              {
+                rotate: offset.interpolate({
+                  inputRange: [
+                    bottomOffset - 1 + 45,
+                    bottomOffset + 45,
+                    bottomOffset + maxHeight,
+                    bottomOffset + maxHeight + 1
+                  ],
+                  outputRange: ["180deg", "180deg", "0deg", "0deg"]
+                })
+              }
+            ]
+          }}
+        />
+      );
     }
-    return (
-      <Animated.Image
-        source={require("./Customize/res/arrow.png")}
-        style={{
-          transform: [
-            {
-              rotate: 180-this.state.rotateY * 2.5 + "deg"
-            }
-          ]
-        }}
-      />
-    );
-  }
-  else {
-    if (s === "loading" || s === "cancelLoading" || s === "rebound") {
-      return <ActivityIndicator color={"gray"}/>;
+    else {
+      if (s === "loading" || s === "cancelLoading" || s === "rebound") {
+        return <ActivityIndicator color={"gray"} />;
+      }
+      const { maxHeight, offset, bottomOffset } = this.props;
+      return (
+        <Animated.Image
+          source={require("./Customize/res/arrow.png")}
+          style={{
+            transform: [
+              {
+                rotate: offset.interpolate({
+                  inputRange: [
+                    bottomOffset - 1 + 45,
+                    bottomOffset + 45,
+                    bottomOffset + maxHeight,
+                    bottomOffset + maxHeight + 1
+                  ],
+                  outputRange: ["180deg", "180deg", "0deg", "0deg"]
+                })
+              }
+            ]
+          }}
+        />
+      );
     }
-    const { maxHeight, offset, bottomOffset } = this.props;
-    return (
-      <Animated.Image
-        source={require("./Customize/res/arrow.png")}
-        style={{
-          transform: [
-            {
-              rotate: offset.interpolate({
-                inputRange: [
-                  bottomOffset - 1 + 45,
-                  bottomOffset + 45,
-                  bottomOffset + maxHeight,
-                  bottomOffset + maxHeight + 1
-                ],
-                outputRange: ["180deg", "180deg", "0deg", "0deg"]
-              })
-            }
-          ]
-        }}
-      />
-    );
-   }
   }
 
-  renderContent(){
+  renderContent() {
     return null;
   }
 
diff --git a/src/NormalHeader.js b/src/NormalHeader.js
@@ -39,24 +39,27 @@ export class NormalHeader extends RefreshHeader {
 
   startLoadAnimation = () => {
     this.loadingAnimation.setValue(0);
-    Animated.timing(this.loadingAnimation, {
-      toValue: 1,
-      duration: 4000,
-      easing: Easing.linear,
-      useNativeDriver:false
-    }).start(() => this.startLoadAnimation());
+    Animated.loop(
+      Animated.timing(this.loadingAnimation, {
+        toValue: 1,
+        duration: 1000,
+        easing: Easing.linear,
+        useNativeDriver: true
+      }),
+      { iterations: -1 },
+    ).start();
   }
 
   _renderIcon() {
     const s = this.state.status;
     if(Platform.OS === "harmony"){
-    this.startLoadAnimation();
-    const rotateValue=this.loadingAnimation.interpolate({
-      inputRange: [0,1],
-      outputRange: ["0deg", "360deg"]
-    })
-    if (s === "refreshing" || s === "rebound") {
-      return <Animated.Image
+      this.startLoadAnimation();
+      const rotateValue=this.loadingAnimation.interpolate({
+        inputRange: [0,1],
+        outputRange: ["0deg", "360deg"]
+      })
+      if (s === "refreshing" || s === "rebound") {
+        return (<Animated.Image
         source={require("./Customize/res/icon_load.png")}
         style={{
           transform: [
@@ -65,20 +68,26 @@ export class NormalHeader extends RefreshHeader {
             }
           ]
         }}
-      />;
+      />);
     }
+    else{
+    const { maxHeight, offset } = this.props;
     return (
       <Animated.Image
         source={require("./Customize/res/arrow.png")}
         style={{
           transform: [
             {
-              rotate: -this.state.rotateY * 2.5 + "deg"
+              rotate: offset.interpolate({
+                inputRange: [-maxHeight - 1 - 10, -maxHeight - 10, -50, -49],
+                outputRange: ["180deg", "180deg", "0deg", "0deg"]
+              })
             }
           ]
         }}
       />
     );
+    }
    }
    else {
     if (s === "refreshing" || s === "rebound") {
diff --git a/src/SpringScrollView.js b/src/SpringScrollView.js
@@ -323,8 +323,6 @@ export class SpringScrollView extends React.PureComponent<SpringScrollViewPropTy
       loadingStatus
     } = e.nativeEvent;
     this._contentOffset = { x, y };
-    this._refreshHeader?.changeToY(y);
-    this._loadingFooter?.changeToY(y);
     if (this._refreshStatus !== refreshStatus) {
       this._toRefreshStatus(refreshStatus);
       this.props.onRefresh && refreshStatus === "refreshing" && this.props.onRefresh();
@@ -573,7 +571,7 @@ export class SpringScrollView extends React.PureComponent<SpringScrollViewPropTy
     showsHorizontalScrollIndicator: true,
     initialContentOffset: { x: 0, y: 0 },
     alwaysBounceVertical: true,
-    pagingEnabled: false,
+    pagingEnabled: true,
     pageSize: { width: 0, height: 0 },
   };
 }
