前言
遺漏的常用組件，剛發(fā)現(xiàn)官方有提供拉鹃，這邊也來介紹一下膏燕。
如本文有錯或理解偏差歡迎聯(lián)系我悟民，會盡快改正更新射亏！
如有什么問題竭业，也可直接通過郵箱 277511806@qq.com 聯(lián)系我未辆。
本章涉及資源下載：
鏈接: https://pan.baidu.com/s/1o84o6JS 密碼: htx6
屬性
animationType（動畫類型） PropTypes.oneOf(['none', 'slide', 'fade'])
none：沒有動畫
slide：從底部滑入
fade：淡入視野
onRequestClose（被銷毀時會調(diào)用此函數(shù)）Platform.OS ==='android'咐柜？PropTypes.func.isRequired：PropTypes.func
在 'Android' 平臺炕桨，必需使用此函數(shù)
onShow（模態(tài)顯示的時候被調(diào)用）function
transparent (透明度) bool
true時肯腕，使用透明背景渲染模態(tài)实撒。
visible（可見性） bool
決定模態(tài)是否可見
onOrientationChange（方向改變時調(diào)用）PropTypes.func
在模態(tài)方向變化時調(diào)用知态，提供的方向只是 '' 或 ''负敏。在初始化渲染的時候也會調(diào)用，但是不考慮當前方向其做。
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的使用很廣泛荷并，這邊我們來看看怎么讓視圖以模態(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必須實現(xiàn)
>
<View style={styles.modalViewStyle}>
{/* 關(guān)閉頁面 */}
<TouchableOpacity
onPress={() => {{
this.setState({
isModal:false
})
}}}
>
<Text>關(guān)閉頁面</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 使用 —— 指示器
這邊我們再來做一個經(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必須實現(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>
);
}
}
總結(jié)
從 modal 的源碼可以看出，modal 其實就是使用了 絕對定位囊颅，所以當 modal 無法滿足我們的需求的時候踢代，我們就可以通過 絕對定位 自己來封裝一個 modal 了嗅骄，對吧溺森，時間關(guān)系屏积，這邊就不講了，大伙自己試試就可以了炊林。
作者：雨澤Forest鏈接：http://www.reibang.com/p/fa5814afac7d來源：簡書著作權(quán)歸作者所有姥卢。商業(yè)轉(zhuǎn)載請聯(lián)系作者獲得授權(quán)，非商業(yè)轉(zhuǎn)載請注明出處渣聚。
