feat(js): fix waterfall for iOS and ohos

Tencent · Jul 12, 2024 · ee29b3e · ee29b3e
1 parent 12e0ce0
commit ee29b3e
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 10 deletions.
diff --git a/driver/js/examples/hippy-vue-demo/src/components/native-demos/demo-waterfall.vue b/driver/js/examples/hippy-vue-demo/src/components/native-demos/demo-waterfall.vue
@@ -4,7 +4,7 @@
         ref="gridView"
         :content-inset="contentInset"
         :column-spacing="columnSpacing"
-        :contain-banner-view="isIos"
+        :contain-banner-view="!isAndroid"
         :contain-pull-footer="true"
         :inter-item-spacing="interItemSpacing"
         :number-of-columns="numberOfColumns"
@@ -25,12 +25,13 @@
           </p>
         </pull-header>
         <div
-          v-if="isIos"
+          v-if="!isAndroid"
           class="banner-view"
         >
           <span>BannerView</span>
         </div>  
-        <waterfall-item 
+        <waterfall-item
+          v-else 
           :fullSpan="true",
           class="banner-view"
         >
@@ -89,7 +90,7 @@ export default {
       headerRefreshText: '继续下拉触发刷新',
       footerRefreshText: '正在加载...',
       isLoading: false,
-      isIos: Vue.Native.Platform === 'ios',
+      isAndroid: Vue.Native.Platform === 'android',
     };
   },
   mounted() {

diff --git a/driver/js/examples/hippy-vue-next-demo/src/components/native-demo/demo-waterfall.vue b/driver/js/examples/hippy-vue-next-demo/src/components/native-demo/demo-waterfall.vue
@@ -4,7 +4,7 @@
       ref="gridView"
       :content-inset="contentInset"
       :column-spacing="columnSpacing"
-      :contain-banner-view="true"
+      :contain-banner-view="!isAndroid"
       :contain-pull-footer="true"
       :inter-item-spacing="interItemSpacing"
       :number-of-columns="numberOfColumns"
@@ -25,7 +25,7 @@
         </p>
       </pull-header>
       <div
-        v-if="isIos"
+        v-if="!isAndroid"
         class="banner-view"
       >
         <span>BannerView</span>
@@ -94,7 +94,7 @@ const interItemSpacing = 6;
 const numberOfColumns = 2;
 // inner content padding
 const contentInset = { top: 0, left: 5, bottom: 0, right: 5 };
-const isIos = Native.Platform === 'ios';
+const isAndroid = Native.Platform === 'android';
 
 const mockFetchData = async (): Promise<any> => new Promise((resolve) => {
   setTimeout(() => {
@@ -248,7 +248,7 @@ export default defineComponent({
       onRefresh,
       onEndReached,
       onClickItem,
-      isIos,
+      isAndroid,
       onHeaderPulling,
       onFooterPulling,
       onHeaderIdle,

diff --git a/driver/js/packages/hippy-react/src/components/waterfall-view.tsx b/driver/js/packages/hippy-react/src/components/waterfall-view.tsx
@@ -24,10 +24,10 @@ import React from 'react';
 import { Fiber } from '@hippy/react-reconciler';
 import { callUIFunction } from '../modules/ui-manager-module';
 import { warn } from '../utils';
+import { Device } from '../native';
 import PullHeader from './pull-header';
 import PullFooter from './pull-footer';
 import View from './view';
-import { Device } from '../native';
 
 type DataItem = any;
 
@@ -293,7 +293,7 @@ class WaterfallView extends React.Component<WaterfallViewProps> {
     if (typeof renderBanner === 'function') {
       const banner = renderBanner();
       if (banner) {
-        if (Device.platform.OS === 'ios') {
+        if (Device.platform.OS === 'ios' || Device.platform.OS === 'ohos') {
           itemList.push((
             <View key="bannerView">
               {React.cloneElement(banner)}