「React Native」引导蒙层

一、背景

做引导蒙层，效果如图

image.png

二、实现

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

1)布局

<View onLayout={({nativeEvent:e})=>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（图片不带后缀，自适应宽高）

 <>
           <View/>/*自己的业务逻辑*/
                <Modal animationType="fade" transparent={true} visible={this.state.visible}
                    onRequestClose={() => {
                        this.setState({
                            visible: false
                        })
                    }}>
                    <TouchableOpacity activeOpacity={1} style={{
                        flexDirection: 'column',
                        // alignItems: 'center',
                        // paddingTop: 400,
                        // paddingRight: 20,
                        // justifyContent: 'center',
                        flex: 1,
                        backgroundColor: 'rgba(0,0,0,0.3)'
                    }}
                        onPress={() => {
                            this.setState({
                                visible: false
                            })
                        }}>
                        <Image source={Commons.Images.mask} resizeMode={'contain'} style={{marginTop:(this.yPostion),
                        marginLeft:(this.xPostion)
                    }}/>
                    </TouchableOpacity>

            </Modal>
            </>