React-Native 组件之 Modal的使用详解


Posted in Javascript onAugust 08, 2017

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);

 运行效果:

React-Native 组件之 Modal的使用详解

从 modal 的源码可以看出,modal 其实就是使用了 绝对定位,所以当 modal 无法满足我们的需求的时候,我们就可以通过 绝对定位 自己来封装一个 modal

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
用Javascript实现锚点(Anchor)间平滑跳转
Sep 08 Javascript
javascript返回顶部效果(自写代码)
Jan 06 Javascript
js动态添加事件并可传参数示例代码
Oct 21 Javascript
javascript记住用户名和登录密码(两种方式)
Aug 04 Javascript
浅谈箭头函数写法在ReactJs中的使用
Aug 22 Javascript
input type=file 选择图片并且实现预览效果的实例
Oct 26 Javascript
Vue2.0设置全局样式(less/sass和css)
Nov 18 Javascript
vue2.0的虚拟DOM渲染思路分析
Aug 09 Javascript
原生js实现针对Dom节点的CRUD操作示例
Aug 26 Javascript
Jquery 动态添加元素并添加点击事件实现过程解析
Oct 12 jQuery
vue 导航内容设置选中状态样式的例子
Nov 01 Javascript
JS实现小米轮播图
Sep 21 Javascript
基于jQuery对象和DOM对象和字符串之间的转化实例
Aug 08 #jQuery
超级简易的JS计算器实例讲解(实现加减乘除)
Aug 08 #Javascript
浅谈ES6新增的数组方法和对象
Aug 08 #Javascript
Angularjs上传文件组件flowjs功能
Aug 07 #Javascript
详解Vue的computed(计算属性)使用实例之TodoList
Aug 07 #Javascript
详解express与koa中间件模式对比
Aug 07 #Javascript
JS实现简单短信验证码界面
Aug 07 #Javascript
You might like
php Smarty初体验二 获取配置信息
2011/08/08 PHP
PHP数组 为文章加关键字连接 文章内容自动加链接
2011/12/29 PHP
解析php多线程下载远程多个文件
2013/06/25 PHP
Laravel搭建后台登录系统步骤详解
2016/07/26 PHP
php实现的简单数据库操作Model类
2016/11/16 PHP
从ThinkPHP3.2.3过渡到ThinkPHP5.0学习笔记图文详解
2019/04/03 PHP
PHP执行linux命令6个函数代码实例
2020/11/24 PHP
jQuery实现动画效果的简单实例
2014/01/27 Javascript
使用jQuery实现购物车结算功能
2017/08/15 jQuery
在knockoutjs 上自己实现的flux(实例讲解)
2017/12/18 Javascript
微信小程序MUI侧滑导航菜单示例(Popup弹出式,左侧不动,右侧滑动)
2019/01/23 Javascript
javascript之分片上传,断点续传的实际项目实现详解
2019/09/05 Javascript
Vue+iview+webpack ie浏览器兼容简单处理
2019/09/20 Javascript
代码分析Python地图坐标转换
2018/02/08 Python
快速解决PyCharm无法引用matplotlib的问题
2018/05/24 Python
Python列表解析配合if else的方法
2018/06/23 Python
python调用java的jar包方法
2018/12/15 Python
python常用函数与用法示例
2019/07/02 Python
django如何通过类视图使用装饰器
2019/07/24 Python
python实现证件照换底功能
2019/08/20 Python
redis数据库及与python交互用法简单示例
2019/11/01 Python
Python使用py2neo操作图数据库neo4j的方法详解
2020/01/13 Python
xadmin使用formfield_for_dbfield函数过滤下拉表单实例
2020/04/07 Python
英国最红的高街时尚品牌:Topshop
2016/08/05 全球购物
几个常见的消息中间件(MOM)
2014/01/08 面试题
简历上的自我评价
2014/02/03 职场文书
商场父亲节活动方案
2014/08/27 职场文书
合作协议书模板2014
2014/09/26 职场文书
2014年卫生院工作总结
2014/12/03 职场文书
学习社交礼仪心得体会
2016/01/22 职场文书
JavaScript 实现页面滚动动画
2021/04/24 Javascript
如何使用分区处理MySQL的亿级数据优化
2021/06/18 MySQL
sql字段解析器的实现示例
2021/06/23 SQL Server
Python Django项目和应用的创建详解
2021/11/27 Python
如何利用python创作字符画
2022/06/25 Python
python自动获取微信公众号最新文章的实现代码
2022/07/15 Python