React-Native 组件之 Modal
时间:2022-04-24
本文章向大家介绍React-Native 组件之 Modal,主要内容包括属性、示例、基本概念、基础应用、原理机制和需要注意的事项等,并结合实例形式分析了其使用技巧,希望通过本文能帮助到大家理解应用这部分内容。
Modal组件可以用来覆盖包含React Native根视图的原生视图(如UIViewController,Activity),用它可以实现遮罩的效果。
属性
Modal提供的属性有:
animationType(动画类型) PropTypes.oneOf([‘none’, ‘slide’, ‘fade’]
- none:没有动画
- slide:从底部滑入
- fade:淡入视野
onRequestClose(被销毁时会调用此函数)
- 在 ‘Android’ 平台,必需调用此函数
onShow(模态显示的时候被调用)
transparent (透明度) bool
- 为true时,使用透明背景渲染模态。
visible(可见性) bool
onOrientationChange(方向改变时调用)
- 在模态方向变化时调用,提供的方向只是 ‘’ 或 ‘’。在初始化渲染的时候也会调用,但是不考虑当前方向。
supportedOrientations(允许模态旋转到任何指定取向)[‘portrait’, ‘portrait-upside-down’, ‘landscape’,’landscape-left’,’landscape-right’])
- 在iOS上,模态仍然受 info.plist 中的 UISupportedInterfaceOrientations字段中指定的限制。
示例
Modal的使用非常简单,例如:
<Modal
animationType='slide' // 从底部滑入
transparent={false} // 不透明
visible={this.state.isModal} // 根据isModal决定是否显示
onRequestClose={() => {this.onRequestClose()}} // android必须实现
>
综合例子:
import React, { Component} from 'react';
import {
AppRegistry,
View,
Modal,
TouchableOpacity,
Text
} from 'react-native';
export default class ModalView extends Component {
constructor(props) {
super(props);
this.state = {
modalVisible: false,
}
}
setModalVisible = (visible)=> {
this.setState({
modalVisible: visible
})
};
render(){
return(
<View style={{flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: '#ffaaff'}}>
<Modal animationType={'none'}
transparent={true}
visible={this.state.modalVisible}
onrequestclose={() => {alert("Modal has been closed.")}}
onShow={() => {alert("Modal has been open.")}}
supportedOrientations={['portrait', 'portrait-upside-down', 'landscape', 'landscape-left', 'landscape-right']}
onOrientationChange={() => {alert("Modal has been OrientationChange.")}}>
<View style={{flex:1, marginTop: 22, backgroundColor: '#aaaaaa', justifyContent: 'center', alignItems: 'center'}}>
<View>
<Text>Hello World!</Text>
<TouchableOpacity onPress={() => {
this.setModalVisible(false)
}}>
<Text>隐藏 Modal</Text>
</TouchableOpacity>
</View>
</View>
</Modal>
<TouchableOpacity onPress={() => {
this.setModalVisible(true)
}}>
<Text>显示 Modal</Text>
</TouchableOpacity>
</View>
)
}
}
AppRegistry.registerComponent('ModalView', ()=>ModalView);
运行效果:
从 modal 的源码可以看出,modal 其实就是使用了 绝对定位,所以当 modal 无法满足我们的需求的时候,我们就可以通过 绝对定位 自己来封装一个 modal
- TensorFlow强化学习入门(0)——Q-Learning的查找表实现和神经网络实现
- 【云端架构】网站运维之CDN链接鉴权示例入门(PHP)
- 以太坊·单机多实例演示
- TensorFlow强化学习入门(1)——双臂赌博机
- CTF逆向--.NET与Python篇
- CTF逆向--安卓篇
- hackme.inndy.tw的19道web题解(下)
- hackme.inndy.tw的19道web题解(中)
- hackme.inndy.tw的19道web题解(上)
- CTF中RSA题型解题思路及技巧
- 技术解析 | Web缓存欺骗测试
- SSH僵尸主机挖矿木马预警
- 看我如何通过Tor Onion在Windows中执行远程Shell
- 某租车系统JAVA代码审计
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Lambda表达式和FastDfs文件上传
- Postman带token测试接口、找不到生产者、无法连接MySQL、禅道部署
- MyBatis-Plus调试配置,IllegaStateException,StringUtils补充
- NullException、Token的作用、Mapstruct用法
- 1.String类型字符串拼接2.IDEA清除缓存、热部署3.File的用法 4.Dubbo查询服务状态
- 1.Dubbo 常见错误及解决方法
- SpringBoot学习一:创建工程、pom文件
- SpringBoot学习二:基础配置
- Spring Boot 学习三:静态资源、整合 Thymeleaf 页面模板、@RestControllerAdvice
- SpringBoot学习四:日志框架、SpringBoot自动化配置
- SpringBoot学习五:错误处理、跨域支持
- Spring Security安全
- SpringBoot定时任务
- MySQL优化以及索引的使用
- 前端表单提交String类型数据后端转日期数据