RN制作新手引导页（移动端）

本文是为移动端app制作一个新手引导页

目录
一、需求
二、思路
三、具体实施
四、注意点
五、拓展

一、需求

1、项目要求制作一个新手引导界面，不同与项目引导界面，新手引导界面是当你进入到该界面才会显示出这个引导图层，然后点击消失，目标图：

1.png

二、思路

2.png

大致思路如下：
1、经过与设计和其他大佬沟通，这个遮罩层可以分为，上、中、下三个区域。
2、上的高度决定了中间图距离上边的Y轴高度，中间图使用设计给的图片并指定对应宽高比（3:2），底部的view使用flex:1进行填充。
3、界面初始化要获取一个值，用于标志是不是需要显示引导页。
4、点击引导页，引导页消失，并本地记录或上传数据到服务器已经显示过了。

三、具体实施

1、第一张引导页，在设计之初，使用了第三方框架，所以这里并不好获取到对应文字的坐标。不过好在上面就是导航，那么我只需要知道导航的高度，便可以确定中间图片放置的位置了。代码如下

1、遮罩层

let modalView = null;
export class modalTemp extends Overlay{

    static show(){
// 这里判断是不是iphonex，可以自行百度搜索如何判断哦
        let naviHeight = (Platform.OS === 'ios') ? isIphoneX() ? 44 : 20 : 0

        modalView = (
// 这里使用了第三方 teaset 组件的 Overlay。

            <Overlay.View
                style={styles.justifyContentEnd}
                modal={false}
                overlayOpacity={0}
                ref={view => this.view = view}
            >
                <TouchableOpacity style={{flex:1}} onPress={() => {
// 这里进行点击关闭遮罩层，还有保存本地数据。需要自行调整
                    this.view.close();
                    DeviceStorage.saveString('FIRSTGUIDE','1');
                }}>
// 第一个view的位置需要自行上下挪动，以调整第二个view 的Y轴
                    <View style={{height:naviHeight + 44 - 10,width:screenW,backgroundColor:'black',opacity:0.5}}/>

                    <Image source={require('../../img/img-guidance-friendcircle.png')} style={{width:screenW, height:(screenW/3 * 2)}}/>

                    <View style={{flex:1,backgroundColor:'black',opacity:0.5}}/>

                </TouchableOpacity>
            </Overlay.View>
        );
        Overlay.show(modalView);
        return modalView;
    }
}

2、调用

// 我是本地封装的方法，从本地获取数据。另外，这个调用方法，我放在了 componentDidMount() 中，为的是在render之后进行调用显示。
        DeviceStorage.getString('FIRSTGUIDE','').then((getData) => {
// 判断有没有数据，没有，就显示引导页
            if (getData === ''  || getData ==='0' || getData === 0 || getData === undefined || getData === null){
                modalTemp.show();
    }
    })

2、第二个和第四个遮罩层使用了简便方法，直接获取了View对应的坐标（对应的Y需要自己略做调整）。获取坐标代码如下：

1、

<View style={[styles.btnEnterRoomStyle, {
    flexDirection: 'row', height: scaleSize(98),
    alignItems: 'center', marginTop:scaleSize(40)
}]}
      ref={'double'}
      onLayout={({nativeEvent:e})=>this.layout(e)}
>

2、layout

layout(e) {
    UIManager.measure(e.target, (x, y, width, height, left, top) => {

        // console.warn('x:'+x)
        //
        // console.warn('y:'+y)
        //
        // console.warn('width:'+width)
        //
        // console.warn('height:'+height)
        //
        // console.warn('left:'+left)
        //
        // console.warn('top:'+top)
        // this.timer = setTimeout(() => {

        // this.tempSecondY = top;

        // },100);
// 这里是我自己封装的获取本地数据的方法，请按实际进行更改
            DeviceStorage.getString('SECONDGUIDE','').then((getData) => {
                if (getData === '' || getData === '0' || getData === 0 || getData === undefined || getData === null) {

                        modalTemp.show({secondY: top, selectPic: 'one'})

                }
            });
    })
}

3、第三张图可以有简便方法
1）、因为图片靠下，可以直接分为上下两个部分。
2）、使用column-reverse 就可以让图片在最下面，而另一部分就使用flex:1填充了。

四、注意点

1、因为项目中，要显示的时机不尽相同，有些调用方法只用放在生命周期函数中，有些可以放在坐标调用函数中，还有些如果需要其他条件的约束则有可能会用到setTimeout
函数进行一些延时，让其他约束条件有时间获取到。

五、拓展

1、大佬

2、大佬