原生有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：