react native Modal 制作背景变暗
发布时间：2020-12-15 06:28:21 所属栏目：百科 来源：网络整理
导读：/** * 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 d
|
/**
* 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.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',
});
（编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |