纸帆|ZevenFang

我们终其一生寻找的无非是那个甘愿为你停下脚步,为你驻足的人。

0%

React Native Modal 点击遮罩层关闭

在开发 ReactNative 程序的时候,经常有这样的需求,弹出一个弹窗窗口,用户需要点击返回键或者点击遮罩层关闭弹窗,以下代码兼容 Android 和 iOS 平台

1
2
3
4
5
6
7
8
9
10
11
12
13
const {width, height} = Dimensions.get('window');
<Modal
animationType={"slide"}
transparent={true}
visible={this.state.modalVisible}
onRequestClose={() => this.setState({modalVisible:false})}>
<View style={{width,height,position:'relative'}}>
<TouchableWithoutFeedback onPress={()=>this.setState({modalVisible:false})}>
<View style={{position:'absolute',width,height,top:0,left:0,backgroundColor:'rgba(0,0,0,.5)'}}/>
</TouchableWithoutFeedback>
{/*...your code*/}
</View>
</Modal>