react-native Modal的学习与使用

原生有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 ：从底部弹出
     f ade ： 淡入视野
     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：