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 ：从底部弹出
     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：