@td-design/react-native/lib/module/modal/Modal/ModalView.js

react-native UI组件库

import React from 'react';
import { StyleSheet, TouchableWithoutFeedback } from 'react-native';
import Animated from 'react-native-reanimated';
import { SafeAreaView } from 'react-native-safe-area-context';
import { useTheme } from '@shopify/restyle';
import useModal from './useModal';
export default function ModalView(props) {
  const {
    bodyContainerStyle,
    animationType = 'slide',
    animationDuration = 300,
    visible = false,
    maskClosable = true,
    maskVisible = true,
    position = 'bottom',
    onClose,
    onAnimationEnd,
    onRequestClose,
    children
  } = props;
  const theme = useTheme();
  const {
    modalVisible,
    wrapStyle,
    defaultStyle,
    handleMaskClose,
    animationStyleMap
  } = useModal({
    animationType,
    animationDuration,
    visible,
    maskClosable,
    position,
    onClose,
    onAnimationEnd,
    onRequestClose
  });
  if (!modalVisible) return null;
  const styles = StyleSheet.create({
    safeArea: {
      flex: 1,
      zIndex: 999
    }
  });
  return /*#__PURE__*/React.createElement(SafeAreaView, {
    edges: [],
    style: [styles.safeArea, defaultStyle]
  }, maskVisible && /*#__PURE__*/React.createElement(TouchableWithoutFeedback, {
    onPress: handleMaskClose
  }, /*#__PURE__*/React.createElement(Animated.View, {
    style: [StyleSheet.absoluteFill, {
      backgroundColor: theme.colors.mask
    }]
  })), /*#__PURE__*/React.createElement(Animated.View, {
    style: [wrapStyle, bodyContainerStyle, animationStyleMap[animationType]]
  }, children));
}
//# sourceMappingURL=ModalView.js.map