基础篇章:关于 React Native 之 Modal 组件的讲解
时间:2022-04-28
本文章向大家介绍基础篇章:关于 React Native 之 Modal 组件的讲解,主要内容包括Modal 属性、实例演示、基本概念、基础应用、原理机制和需要注意的事项等,并结合实例形式分析了其使用技巧,希望通过本文能帮助到大家理解应用这部分内容。
(友情提示:RN学习,从最基础的开始,大家不要嫌弃太基础,会的同学请自行略过,希望不要耽误已经会的同学的宝贵时间)
Modal是模态视图,它的作用是可以用来覆盖 React Native中根视图的原生视图,Modal模态视图是一种覆盖包围当前内容视图的一个简单方法。
注意:如果你需要如何在您的应用程序的其余部分呈现模态的更多控制,那么可以考虑使用顶级导航(top-level Navigator)。
Modal 属性
照例,我想大家都知道我的习惯了,毕竟官网也是这个顺序,那就是在用人之前,先要了解人,毕竟疑人不用,用人不疑嘛,要想相信一个人,首先得了解一个人嘛。来,看看 Modal 的相关属性。
- animated bool 是否有动画效果,不过这个属性已经被抛弃了,取之代替的是:animationType
- animationType (['none', 'slide', 'fade']) 这个animationType属性作用就是如何控制模态动画,有一下三个类型:
- none 出现的时候不带动画效果
- fade 带有淡入动画的效果
- slide 从底部滑动出来的动画效果
- onRequestClose Platform.OS === 'android' ? PropTypes.func.isRequired : PropTypes.func 这是一个 Android 平台需要的属性,它的作用是当这个模态视图取消或者关闭消失的时候回调这个函数
- onShow function 当模态视图显示的时候调用此函数
- transparent bool 布尔值,是否透明,true 将使得在一个透明背景的模式
- visible bool 布尔值,是否可见
- onOrientationChange func ios 当在显示模态的方向变化时回调此函数
- supportedOrientations ios (['portrait', 'portrait-upside-down', 'landscape', 'landscape-left', 'landscape-right']))
实例演示
来,我们大家一起看看这个效果的实现,看完效果就更加直观的能够感受到这个组件的作用和功能了。动态效果图如下:
实例代码
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Modal,
Picker,
Switch,
TouchableHighlight,
Text,
View
} from 'react-native';
class Button extends Component {
state = {
active: false,
};
_onHighlight = () => {
this.setState({active: true});
};
_onUnhighlight = () => {
this.setState({active: false});
};
render() {
var colorStyle = {
color: this.state.active ? '#fff' : '#000',
};
return (
<TouchableHighlight
onHideUnderlay={this._onUnhighlight}
onPress={this.props.onPress}
onShowUnderlay={this._onHighlight}
style={[styles.button, this.props.style]}
underlayColor="#a9d9d4">
<Text style={[styles.buttonText, colorStyle]}>{this.props.children}</Text>
</TouchableHighlight>
);
}
}
export default class ModalDemo extends Component {
state = {
animationType: 'none',
modalVisible: false,
transparent: false,
};
_setModalVisible = (visible) => {
this.setState({modalVisible: visible});
};
_setAnimationType = (type) => {
this.setState({animationType: type});
};
_toggleTransparent = () => {
this.setState({transparent: !this.state.transparent});
};
render() {
var modalBackgroundStyle = {
backgroundColor: this.state.transparent ? 'rgba(0, 0, 0, 0.5)' : '#f5fcff',
};
var innerContainerTransparentStyle = this.state.transparent
? {backgroundColor: '#fff', padding: 20}
: null;
var activeButtonStyle = {
backgroundColor: '#ddd'
};
return (
<View>
<Modal
animationType={this.state.animationType}
transparent={this.state.transparent}
visible={this.state.modalVisible}
onRequestClose={() => this._setModalVisible(false)}
>
<View style={[styles.container, modalBackgroundStyle]}>
<View style={[styles.innerContainer, innerContainerTransparentStyle]}>
<Text>This modal was presented {this.state.animationType === 'none' ? 'without' : 'with'} animation.</Text>
<Button
onPress={this._setModalVisible.bind(this, false)}
style={styles.modalButton}>
Close
</Button>
</View>
</View>
</Modal>
<View style={styles.row}>
<Text style={styles.rowTitle}>Animation Type</Text>
<Button onPress={this._setAnimationType.bind(this, 'none')} style={this.state.animationType === 'none' ? activeButtonStyle : {}}>
none
</Button>
<Button onPress={this._setAnimationType.bind(this, 'slide')} style={this.state.animationType === 'slide' ? activeButtonStyle : {}}>
slide
</Button>
<Button onPress={this._setAnimationType.bind(this, 'fade')} style={this.state.animationType === 'fade' ? activeButtonStyle : {}}>
fade
</Button>
</View>
<View style={{marginTop:50,flexDirection: 'row',alignItems: 'center',justifyContent: 'center'}}>
<Text style={{color:'grey',fontWeight: 'bold',marginRight:20}}>Transparent</Text>
<Switch value={this.state.transparent} onValueChange={this._toggleTransparent} />
</View>
<Button onPress={this._setModalVisible.bind(this, true)}>
Present
</Button>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
padding: 20,
},
innerContainer: {
borderRadius: 10,
alignItems: 'center',
},
row: {
alignItems: 'center',
flex: 1,
flexDirection: 'row',
marginBottom: 20,
},
rowTitle: {
flex: 1,
fontWeight: 'bold',
},
button: {
borderRadius: 5,
flex: 1,
height: 44,
alignSelf: 'stretch',
justifyContent: 'center',
overflow: 'hidden',
},
buttonText: {
fontSize: 18,
margin: 5,
textAlign: 'center',
},
modalButton: {
marginTop: 10,
},
pickerItem: {
fontSize: 16,
},
});
AppRegistry.registerComponent('ModalDemo', () => ModalDemo);
这个例子内容比较多,大家仔细看看,最好动手实践一下,这样才能掌握的更加熟练。
- MySQL 5.7安装部署总结(r10笔记第77天)
- Go语言中Socket通信TCP服务端
- MySQL和Oracle的添加字段的处理差别 (r10笔记第73天)
- MySQL修改数据类型的问题总结(r10笔记第74天)
- 深究|Elasticsearch单字段支持的最大字符数?
- Go语言中Socket通信之Tcp客户端
- Oracle 12c PDB迁移及ORA-00600错误分析和解决(r10笔记第72天)
- 【Go 语言社区】epoll详解
- Oracle 12c数据库升级实战(r10笔记第70天)
- Oracle 12c升级检查问题分析(r10笔记第69天)
- 转--使用Revel(go)开发网站
- GoldenGate数据迁移的问题总结(二)(r10笔记第85天)
- Elasticsearch究竟要设置多少分片数?
- 设计模式(1)-使用简单工厂优化代码
- 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 数组属性和方法
- Linux部署python爬虫脚本,并设置定时任务的方法
- centos6编译及安装ZLMediaKit解析
- CentOS7.5安装配置Harbor1.7的全过程
- Linux CentOS 定时运行脚本配置的方法
- 从Centos7升级到Centos8的教程(图文详解)
- Linux(Centos7)下redis5集群搭建和使用说明详解
- CentOS7下安装yum源及上传下载命令rz、sz安装方法(图解)
- C#实例:四路激光测距雷达数据采集和波形图绘制
- Linux 中有效用户组和初始用户组的实现
- ubuntu 16.04 64位兼容32位程序三步曲
- crontab执行结果未通过发送mail通知用户的方法
- 如何将CentOS7升级至CentOS8(详细步骤)
- leetcode树之二叉树的所有路径
- 如何利用Bash脚本监控Linux的内存使用情况
- Ubuntu18 给terminal改个漂亮的命令行提示符的方法