react-native-modalbox 使用

最新推荐文章于 2025-07-16 10:46:00 发布

weixin_34288121

最新推荐文章于 2025-07-16 10:46:00 发布

阅读量1k

点赞数

CC 4.0 BY-SA版权

文章标签： python 移动开发

原文链接：https://my.oschina.net/KJhulinhua/blog/1536740

本文介绍了 React Native 中 Modalbox 组件的使用方法，包括安装步骤、常用 action 方法、事件监听及各种属性设置等，帮助开发者快速掌握并应用到实际项目中。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

2019独角兽企业重金招聘Python工程师标准>>>

##react-native-modalbox

Modal视图在iOS原生开发中熟称:"模态视图",在原生开发中运用还是比较常见的，经常使用。在react native 中有提供Modal组建,在这里我要介绍的是react-native-modalbox,个人感觉很好使用。
demo例子请点击这里
github请点击这里
使用

react-native-modalbox安装使用很简单

npm install react-native-modalbox@latest --save
介绍
- action方法
  - open 弹出modal视图 this.refs.myModal.open()
  - close 关闭modal视图 this.refs.myModal.close()
- 事件监听方法
  - onOpened 弹出modal视图时会调用这个方法
  - onClosed 关闭modal视图时会调用这个方法
  - onClosingState 滑动关闭modal视图时会调用这个方法
- 属性
  - isOpen 是否显示modal，默认是false，,如果为true一开始就显示，有动画，可用open方法打开
  - startOpen 默认是false，是否组建一开始就显示,如果为true一开始就显示，无动画
  - isDisabled action失效，即open、close方法失效，滑动不能关闭
  - backdropPressToClose 点击背景是否关modal视图，当backdrop未false的情况下失效
  - swipeToClose 是否滑动关闭
  - swipeThreshold
  - swipeArea 在可旋转区域的像素高度，默认窗口高度
  - position model视图的位置，top、center、bottom
  - entry 这个属性要注意一下，动画的起始位置top、bottom
  - backdrop 是否有点击消失的背景。当这个为false时，backdropPressToClose失效
  - backdropOpacity modal视图背景的透明度
  - backdropColor modal视图背景的颜色
  - backdropContent modal视图背景的内容（view）
  - animationDuration 动画时间
  - easing 打开modal视图是的方法函数
  - backButtonClose 仅安卓,当为true时安卓手机按返回键时modal视图close
  - coverScreen 当true时，modal后面的背景是这个window。比如有navitor时，导航条也会遮住
  - keyboardTopOffset