React Native之Modal实现自定义Dialog

       针对普通的弹框，React Native（RN）给我们提供了有Alert,但使用局限性很大，没有办法自定义，要实现自定义的弹框，我们应该如何来实现呢，这里提供两种方法：第一就是native本地来实现，然后暴露给RN来条用，第二就是使用组件Modal来实现，第一种方法这里就不写了，这里讲解下用Modal如何来实现。

      首先我们先来了解下Modal是什么。

      Modal组件可以用来覆盖包含React Native根视图的原生视图（如UIViewController，Activity）。

在嵌入React Native的混合应用中可以使用Modal。Modal可以使你应用中RN编写的那部分内容覆盖在原生视图上显示。

      常见的属性：

      animationType： enum('none', 'slide', 'fade')   动画类型

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

      onShow： function  显示完毕的回调方法

      transparent： bool  是否为透明，默认为不透明，弹框需要将这个设置成 true.

      visible： bool   是否显示

      示例：

      我们先创建一个ShareModal.返回一个Modal组件。     

console.log('onRequestClose...')} >

       
       
       选择分享方式
       
       
       
       微信朋友圈
       
       
       
       微信好友
       
       
       
       新浪微博
       
       
       
       取消
       
       
       

效果图：

通过Modal定义的弹框，有两个不足.

一：背景透明层也是Modal的一部分，如果animationType是slide方式，则透明背景会一起滑动，体验很不友好，fade模式相对好点.

二：没有类似于原生的的setCancelable方法，不过我们可以模拟实现这种效果，就是在透明区域加一层view，点击该层view则close当前modal.

RN开发群：527459711.欢迎大伙加入.