react native popup怎么实现-mile米乐体育

react native popup怎么实现

这篇文章主要介绍“reactnativepopup怎么实现”，在日常操作中，相信很多人在reactnativepopup怎么实现问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”reactnativepopup怎么实现”的疑惑有所帮助！接下来，请跟着小编一起来学习吧！

react native 官方提供了 modal 组件，但 modal 是属于全屏的弹出层，当 modal 显示时，操作区域只有 modal 里的元素，而且焦点会被 modal 劫持。虽然移动端不常见，但有些场景还是希望可以用轻量级一点的 popup。

在 react native 里，元素的层级是不可以被穿透的，子元素无论如何都不能遮挡父元素。所以选择了在顶层添加 popup，设置绝对定位，显示时根据指定元素来动态调整 popup 的位置的方案。

具体实现

popup 会有显示或隐藏两种状态，使用一个 state 来控制。

constcomponent=()=>{const[visible,setvisible]=usestate(false);return(<>{visible&&<>});};

popup 的 属于视图类组件，ui 结构包括：

• 一个作为容器的 view，由于 ios 有刘海，所以在 ios 上需要使用 safeareaview 来避免被刘海遮挡。同时添加一个点击事件监听当点击时关闭 popup 。

• 一个指向目标对象的三角形。

• 一个包裹内容的 view。

由于 popup 的位置和内容是动态的，所以需要两个 state 存储相关数据。

• 一个存储位置相关的 css。

• 一个存储动态内容。

constcomponent=({style,...other})=>{const[visible,setvisible]=usestate(false);const[popupstyle,setpopupstyle]=usestate({});const[content,setcontent]=usestate(null);constonpress=usecallback(()=>{setvisible(false);},[]);return(<>{visible&&createelement(platform.os==='ios'?safeareaview:view,{style:{...styles.popup,...popupstyle,},},{content},)});};conststyles=stylesheet.create({popup:{position:'absolute',zindex:99,shadowcolor:'#333',shadowopacity:0.12,shadowoffset:{width:2},borderradius:4,},triangle:{width:0,height:0,marginleft:12,borderleftwidth:8,borderleftcolor:'transparent',borderrightwidth:8,borderrightcolor:'transparent',borderbottomwidth:8,borderbottomcolor:'white',},content:{backgroundcolor:'white',},});

因为是全局的 popup，所以选择了一个全局变量来提供 popup 相关的操作方法。

如果全局 popup 不适用，可以改成在需要时插入 popup 并使用 ref 来提供操作方法。

目标元素，动态内容和一些相关的可选配置都是在调用 show 方法时通过参数传入的，

useeffect(()=>{global.$popup={show:(triggerref,render,options={})=>{const{x:offsetx=0,y:offsety=0}=options.offset||{};triggerref.current.measure((x,y,width,height,left,top)=>{setpopupstyle({top:top height offsety,left:left offsetx,});setcontent(render());setvisible(true);});},hide:()=>{setvisible(false);},};},[]);

完整代码

importreact,{createelement,forwardref,usestate,useeffect,usecallback,}from'react';importproptypesfrom'prop-types';import{view,safeareaview,platform,touchableopacity,stylesheet,}from'react-native';constcomponent=({style,...other},ref)=>{const[visible,setvisible]=usestate(false);const[popupstyle,setpopupstyle]=usestate({});const[content,setcontent]=usestate(null);constonpress=usecallback(()=>{setvisible(false);},[]);useeffect(()=>{global.$popup={show:(triggerref,render,options={})=>{const{x:offsetx=0,y:offsety=0}=options.offset||{};triggerref.current.measure((x,y,width,height,left,top)=>{setpopupstyle({top:top height offsety,left:left offsetx,});setcontent(render());setvisible(true);});},hide:()=>{setvisible(false);},};},[]);return(<>{visible&&createelement(platform.os==='ios'?safeareaview:view,{style:{...styles.popup,...popupstyle,},},{content},)});};component.displayname='popup';component.prototype={};conststyles=stylesheet.create({popup:{position:'absolute',zindex:99,shadowcolor:'#333',shadowopacity:0.12,shadowoffset:{width:2},borderradius:4,},triangle:{width:0,height:0,marginleft:12,borderleftwidth:8,borderleftcolor:'transparent',borderrightwidth:8,borderrightcolor:'transparent',borderbottomwidth:8,borderbottomcolor:'white',},content:{backgroundcolor:'white',},});exportdefaultforwardref(component);

使用方法

• 在入口文件页面内容的末尾插入 popup 元素。

  //app.jsximportpopupfrom'./popup';constapp=()=>{return(<>...);};

• 使用全局变量控制。

  //显示$popup.show();//隐藏$popup.hide();

到此，关于“reactnativepopup怎么实现”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注恰卡编程网网站，小编会继续努力为大家带来更多实用的文章！