【React Native开发】React Native 控件之Modal详解-Android/iOS双平台通用(56)

本文来自:江清清的技术专栏(http://www.lcode.org)

(一)前言

今天我们来看一下React Native控件Modal具体介绍以及实际使用方法,该适配Android、iOS双平台。

刚创建的React Native技术交流4群(458982758),欢迎各位大牛,React Native技术爱好者加入交流!同时博客右侧欢迎微信扫描关注订阅号,移动技术干货,精彩文章技术推送!

Modal视图在iOS原生开发中熟称:"模态视图",Modal进行封装之后，可以弹出来覆盖包含React Native跟视图的原生界面(例如:UiViewControllView,Activity)。在使用React Native开发的混合应用中使用Modal组件，该可以让你使用RN开发的内功呈现在原生视图的上面。

如果你使用React Native开发的应用，从跟视图就开始开发起来了，那么你应该是Navigator导航器进行控制页面弹出，而不是使用Modal模态视图。通过顶层的Navigator，你可以使用configureScene属性进行控制如何在你开发的App中呈现一个Modal视图。

(二)属性方法

1.animated bool 控制是否带有动画效果

2.onRequestClose Platform.OS==='android'? PropTypes.func.isRequired : PropTypes.func

3.onShow function方法

4.transparent bool 控制是否带有透明效果

5.visible bool 控制是否显示

(三)实例

上面我们已经对于Modal组件做了相关介绍，下面我们使用一个实例具体来演示一下Modal组件的基本用法。首先来看一下具体代码:

?
运行效果如下:

iOS平台运行效果





Android平台运行效果:





(四)最后总结

今天我们主要学习一下Modal组件详解。