前言
- 遺漏的常用組件，剛發現官方有提供，這邊也來介紹一下。
- 如本文有錯或理解偏差歡迎聯系我，會盡快改正更新！
- 如有什么問題，也可直接通過郵箱 277511806@qq.com 聯系我。
本章涉及資源下載：
鏈接: https://pan.baidu.com/s/1o84o6JS 密碼: htx6
屬性
-
animationType（動畫類型） PropTypes.oneOf(['none', 'slide', 'fade'])
- none：沒有動畫
- slide：從底部滑入
- fade：淡入視野
-
onRequestClose（被銷毀時會調用此函數）Platform.OS ==='android'？PropTypes.func.isRequired：PropTypes.func
- 在 'Android' 平臺，必需使用此函數
onShow（模態顯示的時候被調用）function
-
transparent (透明度) bool
- true時，使用透明背景渲染模態。
-
visible（可見性） bool
- 決定模態是否可見
-
onOrientationChange（方向改變時調用）PropTypes.func
- 在模態方向變化時調用，提供的方向只是 '' 或 ''。在初始化渲染的時候也會調用，但是不考慮當前方向。
-
supportedOrientations（允許模態旋轉到任何指定取向）PropTypes.arrayOf(PropTypes.oneOf(['portrait', 'portrait-upside-down', 'landscape'，'landscape-left'，'landscape-right']））
- 在iOS上，模態仍然受 info.plist 中的 UISupportedInterfaceOrientations字段中指定的限制。
modal 基本使用
-
modal的使用很廣泛，這邊我們來看看怎么讓視圖以模態的形式展示：
export default class One extends Component { // 構造 constructor(props) { super(props); // 初始狀態 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} // 根據isModal決定是否顯示 onRequestClose={() => {this.onRequestClose()}} // android必須實現 > <View style={styles.modalViewStyle}> {/* 關閉頁面 */} <TouchableOpacity onPress={() => {{ this.setState({ isModal:false }) }}} > <Text>關閉頁面</Text> </TouchableOpacity> </View> </Modal> {/* 返回按鈕 */} <TouchableOpacity onPress={() => {{ this.props.navigator.pop() }}} > <Text>返回</Text> </TouchableOpacity> {/* 模態跳轉 */} <TouchableOpacity onPress={() => this.showModal()} > <Text>模態跳轉</Text> </TouchableOpacity> </View> ); } }
modal 使用 —— 指示器
-
這邊我們再來做一個經常使用的功能 —— 指示器
export default class One extends Component { // 構造 constructor(props) { super(props); // 初始狀態 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} // 根據isModal決定是否顯示 onRequestClose={() => {this.onRequestClose()}} // android必須實現 > <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
總結
- 從 modal 的源碼可以看出，modal 其實就是使用了 絕對定位，所以當 modal 無法滿足我們的需求的時候，我們就可以通過 絕對定位 自己來封裝一個 modal 了，對吧，時間關系，這邊就不講了，大伙自己試試就可以了。
