当前位置:首页 > 编程教程 > javascript技术文章 > React-Native 组件之 Modal的使用详解

详细介绍React-Native 组件之 Modal的使用

  • 发布时间:
  • 作者:码农之家
  • 点击:51

这篇文章主要知识点是关于React、Native、Modal、的内容,如果大家想对相关知识点有系统深入的学习,可以参阅以下电子书

JavaScript权威指南
  • 类型:JS指南大小:22 MB格式:PDF作者:DavidFlanagan,淘宝前端团队
立即下载

Tags:JS React Native modal 

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

 运行效果:

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

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持码农之家。

以上就是本次给大家分享的关于java的全部知识点内容总结,大家还可以在下方相关文章里找到相关文章进一步学习,感谢大家的阅读和支持。

javascript 相关电子书
学习笔记
网友NO.166184

React Native使用Modal自定义分享界面的示例代码

在很多App中都会涉及到分享,React Native提供了Modal组件用来实现一些模态弹窗,例如加载进度框,分享弹框等。使用Modal搭建分析的效果如下: 自定义的分析界面代码如下: ShareAlertDialog.js /** * https://github.com/facebook/react-native * @flow 分享弹窗 */import React, {Component} from 'react';import {View, TouchableOpacity, Alert,StyleSheet, Dimensions, Modal, Text, Image} from 'react-native';import Separator from "./Separator";const {width, height} = Dimensions.get('window');const dialogH = 110;export default class ShareAlertDialog extends Component { constructor(props) { super(props); this.state = { isVisible: this.props.show, }; } componentWillReceiveProps(nextProps) { this.setState({isVisible: nextProps.show}); } closeModal() { this.setState({ isVisible: false }); this.props.closeModal(false); } renderDialog() { return ( View style={styles.modalStyle} Text style={styles.text}选择分享方式/Text Separator/ View style……

<
1
>

电子书 编程教程 PC软件下载 安卓软件下载

Copyright 2018-2020 xz577.com 码农之家

本站所有电子书资源不再提供下载地址,只分享来路

免责声明:网站所有作品均由会员网上搜集共同更新,仅供读者预览及学习交流使用,下载后请24小时内删除

版权投诉 / 书籍推广 / 赞助:QQ:520161757