fix: popup rn

xiaoyatong · Sep 26, 2024 · 5e3b519 · 5e3b519
1 parent 3dc0d74
commit 5e3b519
Show file tree

Hide file tree

Showing 4 changed files with 74 additions and 99 deletions.
diff --git a/src/packages/popup/demo.taro.tsx b/src/packages/popup/demo.taro.tsx
@@ -10,6 +10,7 @@ import Demo2 from './demos/taro/demo2'
 import Demo3 from './demos/taro/demo3'
 import Demo4 from './demos/taro/demo4'
 import Demo5 from './demos/taro/demo5'
+import Demo7 from './demos/taro/demo7'
 import Demo8 from './demos/taro/demo8'
 
 const PopupDemo = () => {
@@ -100,8 +101,12 @@ const PopupDemo = () => {
         {/* <View className="h2">{translated.ea3d02f2}</View>
         <Demo6 /> */}
 
-        <View className="h2">{translated.c9e6df49}</View>
-        {/* <Demo7 /> */}
+        {harmonyAndRn() ? null : (
+          <>
+            <View className="h2">{translated.c9e6df49}</View>
+            <Demo7 />
+          </>
+        )}
 
         <View className="h2">{translated.cfbdc782}</View>
         <Demo8 />

diff --git a/src/packages/popup/demos/taro/demo1.tsx b/src/packages/popup/demos/taro/demo1.tsx
@@ -1,6 +1,6 @@
 import React, { useState } from 'react'
 import { Popup, Cell } from '@nutui/nutui-react-taro'
-import { View } from '@tarojs/components'
+import { ScrollView, Text } from '@tarojs/components'
 
 const Demo1 = () => {
   const [showBasic, setShowBasic] = useState(false)
@@ -19,15 +19,15 @@ const Demo1 = () => {
           setShowBasic(false)
         }}
       >
-        <View style={{ height: '200px', overflowY: 'scroll' }}>
-          {Array.from({ length: 20 })
+        <ScrollView style={{ height: '200px', overflowY: 'scroll' }}>
+          {Array.from({ length: 1 })
             .fill('')
             .map((_, i) => (
               <Cell key={i}>
-                <View>正文</View>
+                <Text>正文</Text>
               </Cell>
             ))}
-        </View>
+        </ScrollView>
       </Popup>
     </>
   )

diff --git a/src/packages/popup/demos/taro/demo3.tsx b/src/packages/popup/demos/taro/demo3.tsx
@@ -1,6 +1,7 @@
 import React, { useState } from 'react'
 import { Popup, Cell } from '@nutui/nutui-react-taro'
 import { Heart } from '@nutui/icons-react-taro'
+import { harmonyAndRn } from '@/utils/platform-taro'
 
 const Demo3 = () => {
   const [showIcon, setShowIcon] = useState(false)
@@ -21,12 +22,18 @@ const Demo3 = () => {
           setShowIconPosition(true)
         }}
       />
-      <Cell
-        title="自定义图标"
-        onClick={() => {
-          setShowIconDefine(true)
-        }}
-      />
+
+      {harmonyAndRn() ? null : (
+        <>
+          <Cell
+            title="自定义图标"
+            onClick={() => {
+              setShowIconDefine(true)
+            }}
+          />
+        </>
+      )}
+
       <Popup
         closeable
         visible={showIcon}

diff --git a/src/packages/popup/popup.rn.tsx b/src/packages/popup/popup.rn.tsx
@@ -8,7 +8,6 @@ import React, {
   ReactNode,
 } from 'react'
 import { createPortal } from 'react-dom'
-import { CSSTransition } from 'react-transition-group'
 import classNames from 'classnames'
 import { Close } from '@nutui/icons-react-taro'
 import { EnterHandler, ExitHandler } from 'react-transition-group/Transition'
@@ -117,6 +116,8 @@ export const Popup: FunctionComponent<
   const overlayStyles = {
     ...overlayStyle,
     '--nutui-overlay-zIndex': index,
+    width: '100%',
+    height: '100%',
   }
 
   const popStyles = {
@@ -162,7 +163,7 @@ export const Popup: FunctionComponent<
   }
 
   const onHandleClickOverlay = (e: ITouchEvent) => {
-    !harmonyAndRn() && e.stopPropagation()
+    e.stopPropagation()
     if (closeOnOverlayClick) {
       const closed = onOverlayClick && onOverlayClick(e)
       closed && close()
@@ -260,106 +261,68 @@ export const Popup: FunctionComponent<
   const renderPop = () => {
     return (
       <>
-        {!harmonyAndRn() ? (
-          <CSSTransition
-            nodeRef={refObject}
-            classNames={transitionName}
-            mountOnEnter
-            unmountOnExit={destroyOnClose}
-            timeout={duration}
-            in={innerVisible}
-            onEntered={onHandleOpened}
-            onExited={onHandleClosed}
+        {innerVisible ? (
+          <View
+            ref={refObject}
+            style={popStyles}
+            className={popClassName}
+            onClick={onHandleClick}
+            catchMove={lockScroll}
           >
-            <View
-              ref={refObject}
-              style={popStyles}
-              className={popClassName}
-              onClick={onHandleClick}
-              catchMove={lockScroll}
-            >
-              {renderTitle()}
-              {showChildren ? children : ''}
-            </View>
-          </CSSTransition>
-        ) : (
-          <>
-            {innerVisible ? (
-              <View
-                ref={refObject}
-                style={popStyles}
-                className={popClassName}
-                onClick={onHandleClick}
-                catchMove={lockScroll}
-              >
-                {renderTitle()}
-                {showChildren ? children : ''}
-              </View>
-            ) : null}
-          </>
-        )}
+            {renderTitle()}
+            {showChildren ? children : ''}
+          </View>
+        ) : null}
       </>
     )
   }
 
   const renderPopByRN = () => {
     return (
-      <Modal
-        // animationType="slide" // 使用 slide 动画
-        transparent // 使背景透明
-        visible={innerVisible}
-        onRequestClose={onHandleClickOverlay} // 处理 Android 设备的返回按钮
+      <View
+        style={{
+          position: 'absolute',
+          overflow: 'hidden',
+          ...popStyles,
+        }}
+        className={popClassName}
       >
-        <View
-          style={{
-            flex: 1,
-            justifyContent: 'flex-end',
-            backgroundColor: 'rgba(0, 0, 0, 0.5)',
-          }}
-        >
-          <View
-            style={{
-              backgroundColor: 'white',
-              padding: 20,
-              borderTopLeftRadius: 20,
-              borderTopRightRadius: 20,
-              alignItems: 'center',
-            }}
-          >
-            <Text
-              style={{
-                marginBottom: 20,
-                fontSize: 18,
-              }}
-            >
-              这是一个从底部弹出的弹框！------
-            </Text>
-            <TouchableOpacity onPress={onHandleClickOverlay}>
-              <Text>关闭</Text>
-            </TouchableOpacity>
-          </View>
-        </View>
-      </Modal>
+        {renderTitle()}
+        {showChildren ? children : ''}
+      </View>
     )
   }
 
   const renderNode = () => {
     return (
-      <>
-        {/* {overlay ? (
-          <Overlay
+      <Modal
+        animationType="none" // 使用 slide 动画
+        transparent // 使背景透明
+        visible={innerVisible}
+        onRequestClose={onHandleClickOverlay} // 处理 Android 设备的返回按钮
+      >
+        {overlay ? (
+          <TouchableOpacity
             style={overlayStyles}
+            activeOpacity={1}
             className={overlayClassName}
-            visible={innerVisible}
-            closeOnOverlayClick={closeOnOverlayClick}
-            lockScroll={lockScroll}
-            duration={duration}
-            onClick={onHandleClickOverlay}
-          />
-        ) : null} */}
-        {/* {renderPop()} */}
+            // visible={innerVisible}
+            // closeOnOverlayClick={closeOnOverlayClick}
+            // lockScroll={lockScroll}
+            // duration={duration}
+            onPress={onHandleClickOverlay}
+          >
+            <View
+              style={{
+                width: '100%',
+                height: '100%',
+                backgroundColor: 'rgba(0, 0, 0, 0.5)',
+              }}
+            />
+          </TouchableOpacity>
+        ) : null}
         {renderPopByRN()}
-      </>
+      </Modal>
     )
   }