React-Native 組件之 Modal的使用詳解
Modal組件可以用來覆蓋包含React Native根視圖的原生視圖(如UIViewController,Activity),用它可以實現(xiàn)遮罩的效果。
屬性
Modal提供的屬性有:
animationType(動畫類型) PropTypes.oneOf([‘none', ‘slide', ‘fade']
- none:沒有動畫
- slide:從底部滑入
- fade:淡入視野
onRequestClose(被銷毀時會調(diào)用此函數(shù))
在 ‘Android' 平臺,必需調(diào)用此函數(shù)
onShow(模態(tài)顯示的時候被調(diào)用)
transparent (透明度) bool
為true時,使用透明背景渲染模態(tài)。
visible(可見性) bool
onOrientationChange(方向改變時調(diào)用)
在模態(tài)方向變化時調(diào)用,提供的方向只是 ” 或 ”。在初始化渲染的時候也會調(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的使用非常簡單,例如:
<Modal animationType='slide' // 從底部滑入 transparent={false} // 不透明 visible={this.state.isModal} // 根據(jù)isModal決定是否顯示 onRequestClose={() => {this.onRequestClose()}} // android必須實現(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( <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);
運行效果:
從 modal 的源碼可以看出,modal 其實就是使用了 絕對定位,所以當(dāng) modal 無法滿足我們的需求的時候,我們就可以通過 絕對定位 自己來封裝一個 modal
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
React中常見的TypeScript定義實戰(zhàn)教程
這篇文章主要介紹了React中常見的TypeScript定義實戰(zhàn),本文介紹了Fiber結(jié)構(gòu),F(xiàn)iber的生成過程,調(diào)和過程,以及 render 和 commit 兩大階段,需要的朋友可以參考下2022-10-10如何將你的AngularJS1.x應(yīng)用遷移至React的方法
本篇文章主要介紹了如何將你的AngularJS1.x應(yīng)用遷移至React的方法,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2018-02-02