「React Native」引导蒙层

一、背景

做引导蒙层，效果如图

image.png

二、实现

1.获取目标节点的在屏幕的x,y坐标。

1)布局

this.layout(e)}/>

2)获取元素在屏幕的x,y坐标

layout = (e) => {
        console.log('zyx', e)
        UIManager.measure(e.target, (x, y, width, height, left, top) => {
            console.log('x:' + x)
            console.log('y:' + y)
            console.log('width:' + width)
            console.log('height:' + height)
            console.log('left:' + left)
            console.log('top:' + top)
            //可以自定义规则去处理偏移宽高
            this.xPostion = (left + width / 2-30)
            this.yPostion = top + height / 2
        })
    }

2.编写Modal（图片不带后缀，自适应宽高）

 <>
           /*自己的业务逻辑*/
                 {
                        this.setState({
                            visible: false
                        })
                    }}>
                     {
                            this.setState({
                                visible: false
                            })
                        }}>