feat(pulltorefresh): 适配鸿蒙、RN、小程序、H5; RN scrollview 默认事件无法阻止

packages/nutui-taro-demo-rn/src/app.config.ts

@@ -124,7 +124,7 @@ const subPackages = [
   }
 ];
 
-export default defineAppConfig({
+export default defineAppConfig ({
   pages: ['pages/index/index'],
   subPackages,
   window: {
@@ -133,4 +133,4 @@ export default defineAppConfig({
     navigationBarTitleText: 'NutUI-React',
     navigationBarTextStyle: 'black'
   }
-})
+})

packages/nutui-taro-demo-rn/src/feedback/pages/pulltorefresh/index.config.ts

@@ -1,3 +1,3 @@
 export default {
-  navigationBarTitleText: 'PullToRefresh',
+  navigationBarTitleText: 'Pulltorefresh'
 }

packages/nutui-taro-demo-rn/src/feedback/pages/pulltorefresh/index.tsx

@@ -1 +1,2 @@
-export default <>button</>;
+import Demo from '@/packages/pulltorefresh/demo.taro';
+export default Demo;

src/config.json

@@ -839,7 +839,7 @@
           "author": "szg2008"
         },
         {
-          "version": "2.0.0",
+          "version": "3.0.0",
           "name": "PullToRefresh",
           "type": "component",
           "cName": "下拉刷新",

src/packages/pulltorefresh/demo.taro.tsx

@@ -1,5 +1,6 @@
 import React from 'react'
 import Taro from '@tarojs/taro'
+import { ScrollView, View } from '@tarojs/components'
 import Header from '@/sites/components/header'
 import { useTranslate } from '@/sites/assets/locale/taro'
 import Demo1 from './demos/taro/demo1'
@@ -27,16 +28,16 @@ const PullToRefreshDemo = () => {
   return (
     <>
       <Header />
-      <div className={`demo ${Taro.getEnv() === 'WEB' ? 'web' : ''}`}>
-        <h2>{translated.basic}</h2>
+      <ScrollView className={`demo ${Taro.getEnv() === 'WEB' ? 'web' : ''}`}>
+        <View className="h2">{translated.basic}</View>
         <Demo1 />
 
-        <h2>{translated.scrollView}</h2>
+        <View className="h2">{translated.scrollView}</View>
         <Demo2 />
 
-        <h2>{translated.primary}</h2>
+        <View className="h2">{translated.primary}</View>
         <Demo3 />
-      </div>
+      </ScrollView>
     </>
   )
 }

src/packages/pulltorefresh/demos/taro/demo1.tsx

@@ -1,14 +1,12 @@
 import React, { useState } from 'react'
-import { PullToRefresh, Toast } from '@nutui/nutui-react-taro'
+import { Image, View } from '@tarojs/components'
+import { PullToRefresh } from '@nutui/nutui-react-taro'
+import Taro from '@tarojs/taro'
+import pxTransform from '@/utils/px-transform'
 
 const Demo1 = () => {
   const [list] = useState([1, 2, 3, 4, 5, 6, 7])
-  const [show, SetShow] = useState(false)
-  const [toastMsg, SetToastMsg] = useState('')
-  const toastShow = (msg: any) => {
-    SetToastMsg(msg)
-    SetShow(true)
-  }
+
   return (
     <>
       <PullToRefresh
@@ -18,24 +16,25 @@ const Demo1 = () => {
         }}
         onRefresh={() =>
           new Promise((resolve) => {
-            toastShow('😊')
+            Taro.showToast({
+              title: '😊',
+              icon: 'none',
+            })
             resolve('done')
           })
         }
         renderIcon={(status) => {
           return (
             <>
               {(status === 'pulling' || status === 'complete') && (
-                <img
-                  alt=""
-                  style={{ height: '26px', width: '36px' }}
+                <Image
+                  style={{ height: pxTransform(26), width: pxTransform(36) }}
                   src="https://img13.360buyimg.com/imagetools/jfs/t1/219180/19/37902/438/65fa8cbbF5278d022/5eabe69b64bba791.png"
                 />
               )}
               {(status === 'canRelease' || status === 'refreshing') && (
-                <img
-                  alt=""
-                  style={{ height: '26px', width: '36px' }}
+                <Image
+                  style={{ height: pxTransform(26), width: pxTransform(36) }}
                   src="https://img10.360buyimg.com/imagetools/jfs/t1/230454/20/14523/223/65fab2d1F379c3968/ac35992443abab0c.png"
                 />
               )}
@@ -44,26 +43,19 @@ const Demo1 = () => {
         }}
       >
         {list.map((item) => (
-          <div
+          <View
             style={{
-              textAlign: 'center',
-              height: '50px',
-              lineHeight: '50px',
+              display: 'flex',
+              justifyContent: 'center',
+              alignItems: 'center',
+              height: pxTransform(50),
             }}
             key={item}
           >
             {item}
-          </div>
+          </View>
         ))}
       </PullToRefresh>
-      <Toast
-        type="text"
-        visible={show}
-        content={toastMsg}
-        onClose={() => {
-          SetShow(false)
-        }}
-      />
     </>
   )
 }

src/packages/pulltorefresh/demos/taro/demo2.tsx

@@ -1,6 +1,7 @@
 import React, { useState } from 'react'
 import { ScrollView } from '@tarojs/components'
-import { PullToRefresh, Cell, Toast } from '@nutui/nutui-react-taro'
+import { Cell, PullToRefresh } from '@nutui/nutui-react-taro'
+import pxTransform from '@/utils/px-transform'
 
 const Demo2 = () => {
   const [list] = useState([1, 2, 3, 4, 5, 6, 7])
@@ -14,7 +15,7 @@ const Demo2 = () => {
   return (
     <>
       <ScrollView
-        style={{ height: '150px' }}
+        style={{ height: pxTransform(150) }}
         scrollY
         onScrollEnd={(e) => {
           // scrollTop > 0, PullToRefresh 不触发 touchmove 事件。
@@ -37,14 +38,6 @@ const Demo2 = () => {
           ))}
         </PullToRefresh>
       </ScrollView>
-      <Toast
-        type="text"
-        visible={show}
-        content={toastMsg}
-        onClose={() => {
-          SetShow(false)
-        }}
-      />
     </>
   )
 }

src/packages/pulltorefresh/demos/taro/demo3.tsx

@@ -1,38 +1,36 @@
 import React, { useState } from 'react'
-import { PullToRefresh, Toast } from '@nutui/nutui-react-taro'
+import { Image, Text, View } from '@tarojs/components'
+import { PullToRefresh } from '@nutui/nutui-react-taro'
+import Taro from '@tarojs/taro'
+import pxTransform from '@/utils/px-transform'
 
 const Demo1 = () => {
   const [list] = useState([1, 2, 3, 4, 5, 6, 7])
-  const [show, SetShow] = useState(false)
-  const [toastMsg, SetToastMsg] = useState('')
-  const toastShow = (msg: any) => {
-    SetToastMsg(msg)
-    SetShow(true)
-  }
   return (
     <>
       <PullToRefresh
         type="primary"
         onRefresh={() =>
           new Promise((resolve) => {
-            toastShow('😊')
+            Taro.showToast({
+              title: '😊',
+              icon: 'none',
+            })
             resolve('done')
           })
         }
         renderIcon={(status) => {
           return (
             <>
               {(status === 'pulling' || status === 'complete') && (
-                <img
-                  alt=""
-                  style={{ height: '26px', width: '36px' }}
+                <Image
+                  style={{ height: pxTransform(26), width: pxTransform(36) }}
                   src="https://img12.360buyimg.com/imagetools/jfs/t1/232373/2/15010/432/65fab02fF99afdb71/0457cdfa268f92df.png"
                 />
               )}
               {(status === 'canRelease' || status === 'refreshing') && (
-                <img
-                  alt=""
-                  style={{ height: '26px', width: '36px' }}
+                <Image
+                  style={{ height: pxTransform(26), width: pxTransform(36) }}
                   src="https://img14.360buyimg.com/imagetools/jfs/t1/186707/25/42738/223/65fab272F0965554b/eae33de2f17909b8.png"
                 />
               )}
@@ -41,26 +39,19 @@ const Demo1 = () => {
         }}
       >
         {list.map((item) => (
-          <div
+          <View
             style={{
-              textAlign: 'center',
-              height: '50px',
-              lineHeight: '50px',
+              display: 'flex',
+              justifyContent: 'center',
+              alignItems: 'center',
+              height: pxTransform(50),
             }}
             key={item}
           >
-            {item}
-          </div>
+            <Text style={{ color: '#ffffff' }}>{item}</Text>
+          </View>
         ))}
       </PullToRefresh>
-      <Toast
-        type="text"
-        visible={show}
-        content={toastMsg}
-        onClose={() => {
-          SetShow(false)
-        }}
-      />
     </>
   )
 }

src/packages/pulltorefresh/pulltorefresh.harmony.css

@@ -8,7 +8,7 @@
   bottom: 0;
   left: 0;
   width: 100%;
-  color: #1A1A1A;
+  color: #1a1a1a;
   display: flex;
   flex-direction: column;
   justify-content: center;
@@ -19,6 +19,18 @@
   height: 26px;
   margin-bottom: 4px;
 }
+.nut-pulltorefresh-primary {
+  background: #ff0f23;
+}
+.nut-pulltorefresh-primary-content {
+  color: rgba(255, 255, 255, 0.9);
+}
+.nut-pulltorefresh-primary-head-content {
+  color: rgba(255, 255, 255, 0.9);
+}
+.nut-pulltorefresh-primary-status-text {
+  color: #ffffff;
+}
 
 [dir=rtl] .nut-pulltorefresh-head-content,
 .nut-rtl .nut-pulltorefresh-head-content {

src/packages/pulltorefresh/pulltorefresh.scss

@@ -25,15 +25,20 @@
 
   &-primary {
     background: $pulltorefresh-color-primary;
-    .nut-pulltorefresh-content {
+
+    &-content {
       color: $color-text-dark;
     }
 
-    .nut-pulltorefresh-head {
+    &-head {
       &-content {
         color: $color-text-dark;
       }
     }
+
+    &-status-text {
+      color: $white;
+    }
   }
 }