taro/src/components/layout/Modal.rn.tsx

import { View, Text, ScrollView } from '@tarojs/components'
import './Modal.scss'
import React, { useState } from 'react';
import { ModalType } from '@/utils/types';
import Box from './Box';
import Taro from '@tarojs/taro';
import {Modal  as ModalRN} from 'react-native'

export default function Modal(props: {
    children: React.ReactNode,
    testInfo?: React.ReactNode,
    title?: string,
    dismiss: Function,
    confirm?: Function,
    themeColor?: string,
    modalType?: ModalType,
    cancelCatchMove?: boolean
}) {

    const [isDismiss, setIsDismiss] = useState(false)

    //阻止中间内容点击事件穿透
    function click(e) {
        if (process.env.TARO_ENV == 'weapp') {
            e.stopPropagation()
        }
        Taro.vibrateShort({
            type: 'medium'
        })
    }

    function onClick() {
        // Taro.vibrateShort({
        //     type:'medium'
        // })
    }

    switch (props.modalType) {
        case ModalType.center:
            return <ModalRN transparent={true} >
                <View onClick={()=>{props.dismiss()}} style={{backgroundColor:'rgba(0,0,0,0.95)',width:'100%',height:'100%',alignItems:'center',justifyContent:'center'}}>
                    <Box><View onClick={click}>
                        {
                            props.children
                        }
                    </View>
                    </Box>
                </View>
            </ModalRN>
    }

    function longPress(e) {
        if (process.env.TARO_ENV == 'weapp') {
            e.stopPropagation()
        }
    }

    function dismiss() {
        if (props.modalType == ModalType.center) {
            props.dismiss()
            return
        }
        setIsDismiss(true)
        setTimeout(() => {
            props.dismiss()
        }, 250)
    }

    global.dismissModal = dismiss;


    return <ModalRN style={{backgroundColor:'red'}} >
        <View style={{ flex: 1, width: 375, flexShrink: 0 }} onClick={(e) => {
            dismiss()
        }}>
            {
                props.testInfo ? props.testInfo : null
            }
        </View>
        <View className={isDismiss ? 'modal_bottom_content modal_bottom_dismiss' : 'modal_bottom_content'} style={{ flexShrink: 0 }} onClick={onClick}>
            {/* <Text className='modal_title' style={{ color: color }}>{props.title ? props.title : '测试标题 '}</Text> */}
            {
                props.children
            }

        </View>

    </ModalRN>
}