這篇文章將為大家詳細(xì)講解有關(guān)React-Native組件之Modal怎么用，小編覺(jué)得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。

我們提供的服務(wù)有：網(wǎng)站制作、成都網(wǎng)站建設(shè)、微信公眾號(hào)開(kāi)發(fā)、網(wǎng)站優(yōu)化、網(wǎng)站認(rèn)證、邵陽(yáng)ssl等。為上1000家企事業(yè)單位解決了網(wǎng)站和推廣的問(wèn)題。提供周到的售前咨詢(xún)和貼心的售后服務(wù)，是有科學(xué)管理、有技術(shù)的邵陽(yáng)網(wǎng)站制作公司

Modal組件可以用來(lái)覆蓋包含React Native根視圖的原生視圖（如UIViewController，Activity），用它可以實(shí)現(xiàn)遮罩的效果。

屬性

Modal提供的屬性有：

animationType（動(dòng)畫(huà)類(lèi)型）PropTypes.oneOf([‘none', ‘slide', ‘fade']

• none：沒(méi)有動(dòng)畫(huà)

• slide：從底部滑入

• fade：淡入視野

onRequestClose（被銷(xiāo)毀時(shí)會(huì)調(diào)用此函數(shù)）

在 ‘Android' 平臺(tái)，必需調(diào)用此函數(shù)

onShow（模態(tài)顯示的時(shí)候被調(diào)用）

transparent (透明度) bool

為true時(shí)，使用透明背景渲染模態(tài)。

visible（可見(jiàn)性）bool

onOrientationChange（方向改變時(shí)調(diào)用）

在模態(tài)方向變化時(shí)調(diào)用，提供的方向只是 ” 或 ”。在初始化渲染的時(shí)候也會(huì)調(diào)用，但是不考慮當(dāng)前方向。

supportedOrientations（允許模態(tài)旋轉(zhuǎn)到任何指定取向）[‘portrait', ‘portrait-upside-down', ‘landscape'，'landscape-left'，'landscape-right']）

在iOS上，模態(tài)仍然受 info.plist 中的 UISupportedInterfaceOrientations字段中指定的限制。

示例

Modal的使用非常簡(jiǎn)單，例如：

 {this.onRequestClose()}} // android必須實(shí)現(xiàn)
 >

綜合例子：

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(
      
         {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.")}}>
          
            
              Hello World!
               {
                this.setModalVisible(false)
              }}>
                隱藏 Modal
              
            
          
        
         {
          this.setModalVisible(true)
        }}>
          顯示 Modal
        
      
    )
  }
}
AppRegistry.registerComponent('ModalView', ()=>ModalView);

 運(yùn)行效果：

從 modal 的源碼可以看出，modal 其實(shí)就是使用了 絕對(duì)定位，所以當(dāng) modal 無(wú)法滿(mǎn)足我們的需求的時(shí)候，我們就可以通過(guò) 絕對(duì)定位 自己來(lái)封裝一個(gè) modal

關(guān)于“React-Native組件之Modal怎么用”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，使各位可以學(xué)到更多知識(shí)，如果覺(jué)得文章不錯(cuò)，請(qǐng)把它分享出去讓更多的人看到。