React Native学习中之modal

    今天讲解一下，Modal这个原生控件，还是有不少的坑的。比如我们需要自定义出一些效果

比如下面的图，我们在安卓里面常见的一个控件dialog而已。我们在React Native很容易实现但是我们要进行分装成我们自己经常使用的。那么如下：

其中要注意的地方有几个

地区 1：这个位子是设置成位于使得背景颜色是透明。如果你想使用其他的方式：加一个《View》这种方式，作为容器这样做到的效果一方面不好，另一方面不可避免的是遇到了一个问题是你设置的透明比例是会造成全部的视图都出现透明。所以不建议使用。

地方2：这个位子是要设置的，然后这边我是设置成一个是可以自定义和默认值的。所以在不输入任何值的情况下是可以的。标红的地方是设置这个弹窗的圆角。

地方3：这个位子设置了一个空的触摸事件。是为了抢占一下大的《View》位子设定的触摸事件，其实就是回调回去进行关闭这个dialog



下面是代码：就贴出来大家看看

import React from 'react';
import { StyleSheet, Text, View, Modal, Image, Dimensions, TouchableOpacity } from 'react-native';
import { _baseColor, _fontGrayColor, _getWidth, _getHeight, _backgroundColor } from '../utils/config'
const { height, width } = Dimensions.get('window');
export default class ModalSureOrUnsure extends React.Component {
constructor(props) {
super(props);
this.state = {

}
}
static propTypes = {
HeightModal: React.PropTypes.any,//这个弹窗的高度
WidthModal: React.PropTypes.any,//这个弹窗的宽度
HeightModalUp: React.PropTypes.any,//这个弹窗的高度上部分
WidthModalUP: React.PropTypes.any,//这个弹窗的宽度上部分
HeightModalDown: React.PropTypes.any,//这个弹窗的高度下部分
WidthModalDown: React.PropTypes.any,//这个弹窗的宽度下部分
modalVisible: false,
message: React.PropTypes.any,//信息内容
FontNumUp: React.PropTypes.number,//开头的内容文字大小
FontColorUp: React.PropTypes.any,//开头的内容文字颜色
FontNumUnder: React.PropTypes.number,//下面取消的文字大小
FontColorUnder: React.PropTypes.any,//下面取消的文字的颜色
callBackSure: React.PropTypes.func,//回调确定的指令
callBackUnsure: React.PropTypes.func,//回调取消的指令
callBackClose: React.PropTypes.func//回调取消的指令
}
//是否关闭Modal以及是调用左边还是右边的

render() {
return (
<View >
<Modal
animationType={"fade"}
transparent={true}
visible={this.props.modalVisible}
onRequestClose={() => { }}

>
<TouchableOpacity  //地方3
style={styles.ViewPage}
onPress={() => {
this.props.callBackClose()

}}>

<View style={styles.ViewPage}>
<View style={{ height: _getHeight(this.props.HeightModal ? this.props.HeightModal : 131), width: _getWidth(this.props.WidthModal ? this.props.WidthModal : 303), backgroundColor: 'white', borderRadius: 8 }}> //地方2

<TouchableOpacity> //地方 3：
<View style={{ height: _getHeight(this.props.HeightModalUp ? this.props.HeightModalUp : 84), width: _getWidth(this.props.WidthModalUP ? this.props.WidthModalUP : 303), alignItems: 'center', justifyContent: 'center' }}>
<Text style={{ fontSize: this.props.FontNumUp, color: this.props.FontColorUp ? this.props.FontColorUp : '#333' }}>{this.props.message}</Text>
</View>

</TouchableOpacity>
<View style={{ height: _getHeight(this.props.HeightModalDown ? this.props.HeightModalDown : 47), width: _getWidth(this.props.WidthModalDown ? this.props.WidthModalDown : 303), flexDirection: 'row', borderTopWidth: 1, borderColor: _backgroundColor }}>
<TouchableOpacity style={{ flex: 1 }}
onPress={() => {
this.props.callBackUnsure()
}}
>
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center', borderRightWidth: 1, borderColor: _backgroundColor }}>
<Text style={{
fontSize: this.props.FontNumUnder ? this.props.FontNumUnder : 16
, color: this.props.FontColorUnder ? this.props.FontColorUnder : _baseColor
}}>取消</Text>
</View>

</TouchableOpacity>
<TouchableOpacity style={{ flex: 1 }}
onPress={() => {
this.props.callBackSure()
}}>
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Text style={{
fontSize: this.props.FontNumUnder ? this.props.FontNumUnder : 16
, color: this.props.FontColorUnder ? this.props.FontColorUnder :
4000
_baseColor
}}>确定</Text>
</View>
</TouchableOpacity>

</View>
</View>
</View>

</TouchableOpacity>
</Modal >

</View >);
}
}

var styles = StyleSheet.create(
{
ViewPage: {
flex: 1,
width: width,
alignItems: 'center',
justifyContent: 'center',
backgroundColor: 'rgba(0,0,0,0.5)'//地区1
}
})