react-native Modal的學習與使用
阿新 • • 發佈:2018-12-23
原生有Dialog,Toast之類的彈窗控制元件,React-Native雖然也有Dialog,但是並不好用,所幸有Modal這個元件,使用起來簡單,而且還比較好用。
之前一直有知道這個控制元件,但因為沒有需要用到所以沒有看過如何使用,今天同事有需要,就看了一下,寫了個demo,自己也趁機學習下Modal的使用。
一.首先是使用,匯入Modal元件。
import { AppRegistry, StyleSheet, Text, View, Animated, Easing, Modal, //這一步不要忘了 Button, TouchableOpacity } from 'react-native';
二.然後我沒看一下Modal的常用屬性都有哪些
1. animationType :設定Modal的出現方式,有3個引數
slide :從底部彈出
fade : 淡入視野
none: 出現沒有動畫
使用:animationType={'slide'}
2.onRequestClose :Modal關閉時呼叫此方法 (在Android平臺上,這是一個必需的方法)
使用 : onRequestClose={() => console.log('onRequestClose...')}
3.onShow : 當modal顯示時,可以傳遞一個函式用來呼叫
4.transparent :使Modal的背景色透明
5.visible : 用來控制Modal是否可見 ture / false
需要注意的是,Modal的大小是全屏的,你無法給它一個樣式來控制大小。
demo程式碼:
/** * Created by zhuoy on 2017/6/15. * */ import React, {Component} from 'react'; import { AppRegistry, StyleSheet, Text, View, Animated, Easing, Modal, Button, TouchableOpacity } from 'react-native'; export default class Swiper extends Component { constructor(props) { super(props); this.state = { fadeAnim: new Animated.Value(15), //設定初始值 modal: false, } } render() { return ( <View style={styles.container}> <Animated.Text style={{fontSize: this.state.fadeAnim}}> Welcome my react-native !</Animated.Text> <Button title='顯示modal' onPress={() => this.setState({ modal: !this.state.modal })}/> <Modal animationType={'slide'} transparent={true} onRequestClose={() => console.log('onRequestClose...')} visible={this.state.modal} > <TouchableOpacity onPress={() => this.setState({ modal: false })} style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}> <View style={{ position: 'absolute', bottom: 0, width: 500, backgroundColor: 'grey', alignItems:'center' }}> <Text style={{height: 50}}>Hide Modal</Text> <Text style={{height: 50}}>Hide Modal</Text> <Text style={{height: 50}}>Hide Modal</Text> <Text style={{height: 50}}>Hide Modal</Text> <Text style={{height: 50}}>Hide Modal</Text> <Text style={{height: 50}}>Hide Modal</Text> </View> </TouchableOpacity> </Modal> </View> ); } componentDidMount() { Animated.timing( this.state.fadeAnim, //初始值 { toValue: 22, //結束值 duration: 2000, //動畫時間 easing: Easing.linear, }, ).start(); //開始 } } const styles = StyleSheet.create({ container: { flex: 1 }, item: { position: 'absolute', top: 0, bottom: 0, left: 0, right: 0, } });
程式碼gif: