前言
- 遺漏的常用組件树绩，剛發(fā)現(xiàn)官方有提供似舵，這邊也來(lái)介紹一下。
- 如本文有錯(cuò)或理解偏差歡迎聯(lián)系我葱峡，會(huì)盡快改正更新砚哗！
- 如有什么問(wèn)題，也可直接通過(guò)郵箱 277511806@qq.com 聯(lián)系我砰奕。
本章涉及資源下載：
鏈接: https://pan.baidu.com/s/1o84o6JS 密碼: htx6
屬性
-
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ù)）Platform.OS ==='android'蛛芥？PropTypes.func.isRequired：PropTypes.func
- 在 'Android' 平臺(tái)，必需使用此函數(shù)
onShow（模態(tài)顯示的時(shí)候被調(diào)用）function
-
transparent (透明度) bool
- true時(shí)军援，使用透明背景渲染模態(tài)仅淑。
-
visible（可見(jiàn)性） bool
- 決定模態(tài)是否可見(jiàn)
-
onOrientationChange（方向改變時(shí)調(diào)用）PropTypes.func
- 在模態(tài)方向變化時(shí)調(diào)用，提供的方向只是 '' 或 ''胸哥。在初始化渲染的時(shí)候也會(huì)調(diào)用涯竟，但是不考慮當(dāng)前方向。
-
supportedOrientations（允許模態(tài)旋轉(zhuǎn)到任何指定取向）PropTypes.arrayOf(PropTypes.oneOf(['portrait', 'portrait-upside-down', 'landscape'空厌，'landscape-left'庐船，'landscape-right']））
- 在iOS上，模態(tài)仍然受 info.plist 中的 UISupportedInterfaceOrientations字段中指定的限制嘲更。
modal 基本使用
-
modal的使用很廣泛筐钟，這邊我們來(lái)看看怎么讓視圖以模態(tài)的形式展示：
export default class One extends Component { // 構(gòu)造 constructor(props) { super(props); // 初始狀態(tài) this.state = { isModal:false }; } showModal() { this.setState({ isModal:true }) } onRequestClose() { this.setState({ isModal:false }); } render() { return( <View style={styles.container}> {/* 初始化Modal */} <Modal animationType='slide' // 從底部滑入 transparent={false} // 不透明 visible={this.state.isModal} // 根據(jù)isModal決定是否顯示 onRequestClose={() => {this.onRequestClose()}} // android必須實(shí)現(xiàn) > <View style={styles.modalViewStyle}> {/* 關(guān)閉頁(yè)面 */} <TouchableOpacity onPress={() => {{ this.setState({ isModal:false }) }}} > <Text>關(guān)閉頁(yè)面</Text> </TouchableOpacity> </View> </Modal> {/* 返回按鈕 */} <TouchableOpacity onPress={() => {{ this.props.navigator.pop() }}} > <Text>返回</Text> </TouchableOpacity> {/* 模態(tài)跳轉(zhuǎn) */} <TouchableOpacity onPress={() => this.showModal()} > <Text>模態(tài)跳轉(zhuǎn)</Text> </TouchableOpacity> </View> ); } }
modal 使用 —— 指示器
-
這邊我們?cè)賮?lái)做一個(gè)經(jīng)常使用的功能 —— 指示器
export default class One extends Component { // 構(gòu)造 constructor(props) { super(props); // 初始狀態(tài) this.state = { isModal:false }; } showModal() { this.setState({ isModal:true }) setTimeout(() => { this.setState({ isModal:false }); }, 1500) } onRequestClose() { this.setState({ isModal:false }); } render() { return( <View style={styles.container}> {/* 初始化Modal */} <Modal animationType='fade' // 淡入淡出 transparent={true} // 透明 visible={this.state.isModal} // 根據(jù)isModal決定是否顯示 onRequestClose={() => {this.onRequestClose()}} // android必須實(shí)現(xiàn) > <View style={styles.modalViewStyle}> <View style={styles.hudViewStyle}> <ActivityIndicator style={styles.chrysanthemumStyle}></ActivityIndicator> <Text style={styles.hudTextStyle}>加載中…</Text> </View> </View> </Modal> {/* 返回按鈕 */} <TouchableOpacity onPress={() => {{ this.props.navigator.pop() }}} > <Text>返回</Text> </TouchableOpacity> {/* 顯示指示器 */} <TouchableOpacity onPress={() => this.showModal()} > <Text>顯示指示器</Text> </TouchableOpacity> </View> ); } }
model示例效果.gif
總結(jié)
- 從 modal 的源碼可以看出，modal 其實(shí)就是使用了 絕對(duì)定位赋朦，所以當(dāng) modal 無(wú)法滿足我們的需求的時(shí)候篓冲，我們就可以通過(guò) 絕對(duì)定位 自己來(lái)封裝一個(gè) modal 了李破，對(duì)吧，時(shí)間關(guān)系壹将，這邊就不講了嗤攻，大伙自己試試就可以了。
