react-native自定义Modal模态框|仿ios、微信弹窗RN版

纵观每个优质项目,无论web端还是native原生应用开发,弹窗都是不可忽视的一环,能很大程度上直接决定用户体验。如:微信、支付宝、ios都有很成熟的一套弹窗UI展示场景。

最近一直沉迷在react-native开发研究中,学习起来发现没有想象的难,不过也采坑了不少。鉴于之前有基于h5和小程序技术开发过自定义弹窗的经验,就想着用react-native技术实现msg信息框|alert提示框|confirm确认框|toast弱提示/loading|仿ios、android弹窗,就有了这个rnPop弹窗组件RN版。

效果图

仿真模拟器上画质有些次,真机实测完美,可忽略这一点

react-native自定义Modal模态框|仿ios、微信弹窗RN版

看了上图,是不是觉得调用方式还挺多的,没错,很丰富的应用场景

◆ rnPop弹窗组件目录结构

react-native自定义Modal模态框|仿ios、微信弹窗RN版

◆ 引入方式及调用

import RNPop from \'../utils/rnPop/rnPop.js\'

react-native自定义Modal模态框|仿ios、微信弹窗RN版

显示:this.refs.rnPop.show({...options});

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/zzdjxp.html