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 异步调用框架 (Part 3 - 代码实现)
Aug 04 Javascript
js实现九宫格图片半透明渐显特效的方法
Feb 16 Javascript
jQuery关键词说明插件cluetip使用指南
Apr 21 Javascript
Bootstrap表单Form全面解析
Jun 13 Javascript
JSONP跨域请求
Mar 02 Javascript
ES6学习教程之对象字面量详解
Oct 09 Javascript
vue.js中父组件调用子组件的内部方法示例
Oct 22 Javascript
Angular中sweetalert弹框的基本使用教程
Jul 22 Javascript
Vue.directive使用注意(小结)
Aug 31 Javascript
vue2中引用及使用 better-scroll的方法详解
Nov 15 Javascript
Bootstrap Paginator+PageHelper实现分页效果
Dec 29 Javascript
解决vant-UI库修改样式无效的问题
Nov 03 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学习之PHP运算符
2006/10/09 PHP
禁止直接访问php文件代码分享
2020/05/05 PHP
js 操作select相关方法函数
2009/12/06 Javascript
JQuery中根据属性或属性值获得元素(6种情况获取方法)
2013/01/17 Javascript
jqgrid 表格数据导出实例
2013/11/21 Javascript
JS小功能(onmouseover实现选择月份)实例代码
2013/11/28 Javascript
JS,Jquery获取select,dropdownlist,checkbox下拉列表框的值(示例代码)
2014/01/11 Javascript
20个实用的JavaScript技巧分享
2014/11/28 Javascript
jQuery实现tab标签自动切换的方法
2015/02/28 Javascript
JavaScript保存并运算页面中数字类型变量的写法
2015/07/06 Javascript
js实现横向伸展开的二级导航菜单代码
2015/08/28 Javascript
基于replaceChild制作简单的吞噬特效
2015/09/21 Javascript
JavaScript中ES6 Babel正确安装过程
2016/07/18 Javascript
javascript中数组和字符串的方法对比
2016/07/20 Javascript
jQuery Easyui datagrid行内实现【添加】、【编辑】、【上移】、【下移】
2016/12/19 Javascript
浅谈angularjs中响应回车事件
2017/04/24 Javascript
详解VueRouter进阶之导航钩子和路由元信息
2017/09/13 Javascript
让bootstrap的carousel支持滑动滚屏的实现代码
2017/11/27 Javascript
JavaScript实现左侧菜单效果
2017/12/14 Javascript
微信小程序图表插件wx-charts用法实例详解
2019/05/20 Javascript
解决vuex刷新状态初始化的方法实现
2019/08/15 Javascript
小程序实现层叠卡片滑动效果
2019/08/26 Javascript
微信小程序实现多行文字滚动
2020/11/18 Javascript
Vue3+elementui plus创建项目的方法
2020/12/01 Vue.js
Python多线程编程(七):使用Condition实现复杂同步
2015/04/05 Python
python写入中英文字符串到文件的方法
2015/05/06 Python
python多线程同步实例教程
2019/08/11 Python
Win10+GPU版Pytorch1.1安装的安装步骤
2019/09/27 Python
如何基于python3和Vue实现AES数据加密
2020/03/27 Python
python绘制趋势图的示例
2020/09/17 Python
沃尔玛旗下墨西哥超市:Bodega Aurrera
2020/11/13 全球购物
求职信格式范本
2013/11/15 职场文书
六年级数学教学反思
2014/02/03 职场文书
体现团队精神的口号
2014/06/06 职场文书
办公用品管理制度
2015/08/04 职场文书
css3实现背景图片半透明内容不透明的方法示例
2021/04/13 HTML / CSS