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：