源码网商城,靠谱的源码在线交易网站 我的订单 购物车 帮助

源码网商城

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

  • 时间:2020-09-21 00:06 编辑: 来源: 阅读:
  • 扫一扫,手机访问
摘要:React-Native 组件之 Modal的使用详解
Modal组件可以用来覆盖包含React Native根视图的原生视图(如UIViewController,Activity),用它可以实现遮罩的效果。 [b]属性[/b] Modal提供的属性有: [b]animationType(动画类型)[/b] PropTypes.oneOf([‘none', ‘slide', ‘fade'] [list] [*]none:没有动画[/*] [*]slide:从底部滑入[/*] [*]fade:淡入视野[/*] [/list] [b]onRequestClose(被销毁时会调用此函数)[/b] 在 ‘Android' 平台,必需调用此函数 [b]onShow(模态显示的时候被调用)[/b] [b]transparent (透明度) bool[/b] 为true时,使用透明背景渲染模态。 [b]visible(可见性)[/b] bool [b]onOrientationChange(方向改变时调用)[/b] 在模态方向变化时调用,提供的方向只是 ” 或 ”。在初始化渲染的时候也会调用,但是不考虑当前方向。 [b]supportedOrientations(允许模态旋转到任何指定取向)[‘[/b]portrait', ‘portrait-upside-down', ‘landscape','landscape-left','landscape-right']) 在iOS上,模态仍然受 info.plist 中的 UISupportedInterfaceOrientations字段中指定的限制。 [b]示例[/b] 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);

 运行效果: [img]http://files.jb51.net/file_images/article/201708/20178882529954.gif?20177882547[/img] 从 modal 的源码可以看出,modal 其实就是使用了 绝对定位,所以当 modal 无法满足我们的需求的时候,我们就可以通过 绝对定位 自己来封装一个 modal 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程素材网。
  • 全部评论(0)
联系客服
客服电话:
400-000-3129
微信版

扫一扫进微信版
返回顶部