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 相关文章推荐
纯js实现的论坛常用的运行代码的效果
Jul 15 Javascript
js 页面输出值
Nov 30 Javascript
JavaScript精炼之构造函数 Constructor及Constructor属性详解
Nov 05 Javascript
javascript事件委托的用法及其好处简析
Apr 04 Javascript
关于JS变量和作用域详解
Jul 28 Javascript
微信小程序 安全包括(框架、功能模块、账户使用)详解
Jan 16 Javascript
jQuery插件HighCharts实现的2D面积图效果示例【附demo源码下载】
Mar 15 Javascript
浅谈Angular4实现热加载开发旅程
Sep 08 Javascript
详解JS中的this、apply、call、bind(经典面试题)
Sep 19 Javascript
微信小程序实现页面跳转传值的方法
Oct 12 Javascript
Angular实现的进度条功能示例
Feb 18 Javascript
Echarts.js无法引入问题解决方案
Oct 30 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.MVC的模板标签系统(五)
2006/09/05 PHP
PHP-MySQL教程归纳总结
2008/06/07 PHP
PHP 进程锁定问题分析研究
2009/11/24 PHP
PHP实现简单登录界面
2019/10/23 PHP
帮助避免错误的Javascript陷阱清单
2009/05/31 Javascript
asp.net网站开发中用jquery实现滚动浏览器滚动条加载数据(类似于腾讯微博)
2012/03/14 Javascript
JavaScript常用的返回,自动跳转,刷新,关闭语句汇总
2015/01/13 Javascript
js关于命名空间的函数实例
2015/02/05 Javascript
详解JavaScript中常用的函数类型
2015/11/18 Javascript
使用JavaScript判断手机浏览器是横屏还是竖屏问题
2016/08/02 Javascript
html5+CSS 实现禁止IOS长按复制粘贴功能
2016/12/28 Javascript
实例学习JavaScript读取和写入cookie
2018/01/29 Javascript
使用layer弹窗提交表单时判断表单是否输入为空的例子
2019/09/26 Javascript
vue 实现v-for循环回来的数据动态绑定id
2019/11/07 Javascript
JavaScript 替换所有匹配内容及正则替换方法
2020/02/12 Javascript
echarts实现获取datazoom的起始值(包括x轴和y轴)
2020/07/20 Javascript
详解vite+ts快速搭建vue3项目以及介绍相关特性
2021/02/25 Vue.js
[39:46]完美世界DOTA2联赛PWL S2 LBZS vs Rebirth 第二场 11.25
2020/11/25 DOTA
详解Python中 __get__和__getattr__和__getattribute__的区别
2016/06/16 Python
浅析python递归函数和河内塔问题
2017/04/18 Python
查看django执行的sql语句及消耗时间的两种方法
2018/05/29 Python
python3 flask实现文件上传功能
2020/03/20 Python
python读取指定字节长度的文本方法
2019/08/27 Python
python 绘制场景热力图的示例
2020/09/23 Python
python如何对链表操作
2020/10/10 Python
装潢设计实习自我鉴定
2013/09/19 职场文书
生日寿宴答谢词
2014/01/19 职场文书
党校培训自我鉴定
2014/02/01 职场文书
2015年世界急救日宣传活动方案
2015/05/06 职场文书
实习感想范文
2015/08/10 职场文书
学校标语口号大全
2015/12/26 职场文书
廉政党课工作报告案例
2019/06/21 职场文书
解决vue $http的get和post请求跨域问题
2021/06/07 Vue.js
spring boot项目application.properties文件存放及使用介绍
2021/06/30 Java/Android
阿里云 Windows server 2019 配置FTP
2022/04/28 Servers
nginx lua 操作 mysql
2022/05/15 Servers