up[date app/components/ModalPortal.js

Strides-SPAPP/app/components/ModalPortal.js

@@ -3,8 +3,7 @@
  * @邠心vbe on 2022/02/28
  */
 import React, { Component } from 'react';
-import { StyleSheet, View } from 'react-native';
-import Modal from 'react-native-modal';
+import { StyleSheet, View, Modal} from 'react-native';
 
 let modal
 export default class ModalPortal extends Component {
@@ -141,39 +140,36 @@ export default class ModalPortal extends Component {
 
   render() {
     return (
-      <>
+      <View>
         <Modal
-          style={{margin: 0, zIndex: 900}}
-          isVisible={this.state.showDialog}
-          deviceHeight={$height + statusHeight}
-          avoidKeyboard={true}
-          animationIn={"fadeIn"}
-          animationOut={"fadeOut"}
-          useNativeDriver={true}
+          visible={this.state.showDialog}
+          transparent={true}
+          animationType={"fade"}
+          hardwareAccelerated={true}
           statusBarTranslucent={true}
-          onBackButtonPress={() => this.onBackPress()}
-          onModalHide={() => this.onModalHide()}>
-          {this.state.children}
+          onRequestClose={() => this.onBackPress()}
+          onDismiss={() => this.onModalHide()}>
+          <View style={styles.layer}>
+            {this.state.children}
+          </View>
         </Modal>
         <Modal
-          style={{margin: 0, zIndex: 901}}
-          isVisible={this.state.showLoading}
-          deviceHeight={$height + statusHeight}
-          animationIn="fadeIn"
-          animationOut="fadeOut"
-          useNativeDriver={true}
-          animationInTiming={80}
-          animationOutTiming={100}
+          visible={this.state.showLoading}
+          transparent={true}
+          animationType={"fade"}
+          hardwareAccelerated={true}
           statusBarTranslucent={true}
-          onBackButtonPress={() => this.onBackPress()}>
-          {this.state.loadChildren}
+          onRequestClose={() => this.onBackPress()}>
+          <View style={styles.layer}>
+            {this.state.loadChildren}
+          </View>
         </Modal>
         { this.state.showIOSLoading &&
           <View style={styles.iosLoadingView}>
             {this.state.loadChildren}
           </View>
         }
-      </>
+      </View>
     );
   }
 }
@@ -189,5 +185,11 @@ const styles = StyleSheet.create({
     position: 'absolute',
     justifyContent: 'center',
     backgroundColor: 'rgba(0,0,0,.7)'
+  },
+  layer: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+    backgroundColor: 'rgba(0,0,0,.6)'
   }
 })