react-native使用的Popup

移动端Popup

1. react-native-modal 这个好

   import React, { useState } from "react";
   import { Button, Dimensions, StatusBar, StyleSheet, Text, View } from "react-native";
   // @ts-ignore
   import Modal from 'react-native-modal';
   // 侧边弹出
   const CustomPopup = () => {
     const [showPopup, setShowPopup] = useState(false)
     // 高度视口一样高
     const deviceHeight = Dimensions.get("screen").height;
     return (
       <View style={styles.container}>
       // 在外部展示的按钮
         <Button
           title="显示"
           onPress={() => {
             setShowPopup(true);
           }}
         />
         <Modal
           coverScreen={true} // 默认true 作用弹出层全屏展示
           // 背景色默认半透明所以需要设背景色，并且默认的弹窗是有外边距的 所以需要设置margin
           style={{ width: '50%', height: '100%', backgroundColor: '#fff', margin: 0 }}
           isVisible={showPopup} // 是否显示弹窗
           animationIn="slideInLeft" // 动画过渡效果 从左侧弹出
           animationOut="slideOutLeft" // 动画过渡效果 从左侧消失
           animationInTiming={400} // 动画出现时间 ms
           animationOutTiming={400}// 动画出消失时间 ms
           useNativeDriver={true} // 定义动画是否应使用本机驱动程序 这个必须设置不然会很卡
           statusBarTranslucent // 设置手机状态栏半透明，不然弹出层不会展示全屏
           deviceHeight={deviceHeight} // 设置高度
           backdropTransitionOutTiming={0} // 修复退出动画闪烁问题
           onBackdropPress={() => setShowPopup(false)}
           // 开启向右滑动关闭弹窗 但是必须要关闭 useNativeDriver={false}
            swipeDirection="left"
            // 重新阴影背景，在王者荣耀中开启小窗 会导致阴影只有一半
            customBackdrop={<View style={{ height: 10000, backgroundColor: '#000' }} />}
           onSwipeComplete={() => setShowPopup(false)}
         >
         // 内容
           <View style={{ flex: 1 }}>
             <Text>I am the modal content!</Text>
           </View>
         </Modal>
       </View>
     );
   };
   
   export default CustomPopup;
   
   const styles = StyleSheet.create({
     container: {
      
     }
   })
   
   

2. react-native-modals