首页 > web前端 > js教程 > 正文

解释 React Native 中模态窗口的工作原理

PHPz
发布: 2023-08-24 15:01:01
转载
1540人浏览过

模态组件有助于在 ui 内容上方显示内容视图。

基本模态组件如下 -

<Modal animationType="slide" transparent={true} visible={modalVisible} onRequestClose={() => { Alert.alert("Modal has been closed."); }}> Your Content Here</Modal>
登录后复制

要使用模态组件,您需要先导入它,如下所示 -

import { Modal } from "react-native";
登录后复制
登录后复制

模态窗口的基本属性如下 -

Sr.No 道具与说明
1 animationType

该属性处理显示的动画 模态窗口。它是一个具有三个值的枚举 - 滑动、淡入淡出和无。

2 onDismiss

该属性接受一个将被调用的函数 当模态窗口关闭时。

3 onOrientationChange

设备启动时调用的回调函数 当模态窗口改变方向时 显示。

4 onShow

函数传递为被称为的 prop 值 当显示模态窗口时。

5 presentationStyle

该属性处理模态框的显示 窗户。可用的值是全屏, pageSheet、formSheet 和 overFullScreen。

6 透明

该道具将决定提供透明视图或填充 模式窗口的整个视图。

7 visibile这个属性将决定你的模态窗口是否是 可见或不可见。

示例 1:显示模态窗口显示

要使用模态组件,您需要先导入它,如下所示 -

import { Modal } from "react-native";
登录后复制
登录后复制

要显示模式窗口,您可以决定要在其上显示的动画。选项有滑动、淡入淡出和无。在下面的示例中,我们想要显示一个简单的模式窗口,上面有文本和按钮,如下所示 -

<Modal
      animationType="slide"
      transparent={true}
      visible={isVisible}
   >
   <View style={styles.centeredView}>
      <View style={styles.myModal}>
         <Text style={styles.modalText}>Modal Window Testing!</Text>
            <Button style={styles.modalButton} title="Close" onPress={() => {setModalVisiblility(false); }}/>
      </View>
   </View>
</Modal>
登录后复制

isVisible 变量被分配给可见属性。默认情况下为 false,即默认情况下不会显示模式窗口。 isVisible 属性的初始化如下所示 -

const [isVisible, setModalVisiblility] = useState(false);
登录后复制

setModalVisiblility 会将 isVisible 变量从 false 更新为 true,反之亦然。

组件中定义的关闭按钮调用 setModalVisiblility(false),这将使 isVisible 为 false,并且模式窗口将消失。

要显示模态窗口, 组件外部有一个按钮调用 setModalVisiblility(true),如下所示 -

<View style={styles.centeredView}>
   <Modal
      animationType="slide"
      transparent={true}
      visible={isVisible}
   >
   <View style={styles.centeredView}>
      <View style={styles.myModal}>
         <Text style={styles.modalText}>Modal Window Testing!</Text>
            <Button style={styles.modalButton} title="Close" onPress={() =>{setModalVisiblility(false); }}/>
            </View>
         </View>
      </Modal>
      <Button title="Click Me" onPress={() => {
         setModalVisiblility(true);
      }}
   />
</View>
登录后复制

这是显示/隐藏模式窗口的工作代码。

import React, { useState } from "react";
import { Button, Alert, Modal, StyleSheet, Text, View } from "react-native";
const App = () => {
   const [isVisible, setModalVisiblility] = useState(false);
   return (
      <View style={styles.centeredView}>
         <Modal
            animationType="slide"
            transparent={true}
            visible={isVisible}
         >
         <View style={styles.centeredView}>
            <View style={styles.myModal}>
               <Text style={styles.modalText}>Modal Window Testing!</Text>
                  <Button style={styles.modalButton} title="Close" onPress={() =>{setModalVisiblility(false); }}/>
                  </View>
               </View>
            </Modal>
            <Button title="Click Me" onPress={() => {
               setModalVisiblility(true);
            }}
         />
      </View>
   );
};
const styles = StyleSheet.create({
   centeredView: {
      flex: 1,
      justifyContent: "center",
      alignItems: "center",
      marginTop: 22
   },
   myModal: {
      width:200,
      height:200,
      margin: 20,
      backgroundColor: "white",
      borderRadius: 20,
      padding: 35,
      alignItems: "center",
      shadowColor: "#000",
      shadowOffset: {
         width: 0,
         height: 2
      },
      shadowOpacity: 0.30,
      shadowRadius: 4,
      elevation: 5
   },
   modalText: {
      marginBottom: 20,
      textAlign: "center"
   },
   modalButton: {
      marginBottom: 50,
   }
});
export default App;
登录后复制

输出

解释 React Native 中模态窗口的工作原理

以上就是解释 React Native 中模态窗口的工作原理的详细内容,更多请关注php中文网其它相关文章!

最佳 Windows 性能的顶级免费优化软件
最佳 Windows 性能的顶级免费优化软件

每个人都需要一台速度更快、更稳定的 PC。随着时间的推移,垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是,许多工具可以让 Windows 保持平稳运行。

下载
来源:tutorialspoint网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
开源免费商场系统广告
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号