/**
* Create by bamboo on 2018-05-07
* Modal 例子
*/
import
React, {
Component }
from
'react';
import {
StyleSheet,
Text,
Modal,
View,
TouchableOpacity,
TouchableHighlight,
TouchableWithoutFeedback,
}
from
'react-native';
export
default
class
ModalTest
extends
Component {
constructor(
props) {
super(
props);
this.
state = {
animationType:
'fade',
//none slide fade 动画效果
modalVisible:
false,
//模态场景是否可见
transparent:
true,
//是否透明显示
};
}
render() {
return (
<
View
style=
{{
alignItems:
'center',}
}
>
<
TouchableOpacity
onPress=
{()
=> {
this.
_setModalVisible(
true)}
}
>
<
Text
style=
{{
fontSize:
30,
color:
'red' }
}
> 点击背景变暗
</
Text
>
</
TouchableOpacity
>
<
Modal
style=
{{
height:
50,}
}
animationType=
{this.
state.
animationType
}
transparent=
{this.
state.
transparent
}
visible=
{this.
state.
modalVisible
}
onRequestClose=
{()
=> {
this.
_setModalVisible(
false) }
}
>
<
TouchableWithoutFeedback
onPress=
{()
=> {
this.
_setModalVisible(
false)}
}
>
{
/**触屏*/
}
<
View
style=
{[
styles.
container, {
backgroundColor:
'rgba(0, 0, 0, 0.5)'}]
}
>
<
View
style=
{[
styles.
innerContainer]
}
>
<
Text
style=
{{
fontSize:
20,
marginTop:
10}
}
>
随便点击屏幕变亮
</
Text
>
<
Text
>我注意你很久了
</
Text
>
</
View
>
</
View
>
</
TouchableWithoutFeedback
>
</
Modal
>
</
View
>
);
}
/**
* 修改是否可见
*/
_setModalVisible =(
visible)
=>{
this.
setState({
modalVisible:
visible,
});
}
}
const
styles =
StyleSheet.
create({
container: {
flex:
1,
justifyContent:
'center',
padding:
40,
},
innerContainer: {
borderRadius:
10,
alignItems:
'center',
},
});
