本文是为移动端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、大佬
网友评论