使用Rax开发Native组件踩坑总结
发表时间:2021-1-11
发布人:葵宇科技
浏览次数:86
1.Rax在PC端以及手机竖屏时,屏幕宽度均为750rpx,但是在手机横屏时,不同机型屏幕宽度可能不一样。需要引入'@weex-module/dom'这个库。具体使用方式如下:
const dom = require('@weex-module/dom');
dom&&dom.getComponentRect&&dom.getComponentRect('viewport',option=>{
this.setState({
scale:option.size.width/667
})
});
复制代码
option.size.width用来获取屏幕的宽度,667是设计稿的宽度,scale相当于是把设计稿放大的比例,之后需要用到尺寸的地方都记得乘一下这个比例。
2.使用Rax开发Native组件时,文字不能直接使用View标签包裹,需要使用Text标签包裹,使用View包裹的文字在ios上显示不出来,在PC端、支付宝小程序和微信小程序中可以正常显示。
3.使用Rax开发Native组件时,当图片大小超过外层盒子的情况下,在ios上可以正常显示超出盒子的那部分图片,但是在安卓上超过盒子大小的图片部分不会显示。
4.Rax中可以为标签绑定onAppear事件进行曝光埋点,但是在开发吸底部的投票组件,如果最外层的盒子采用fixed定位,此时onAppear事件可能在播放器上无法正常触发,可以考虑在didMount生命周期函数中进行手动上报。
5.使用Rax开发Native组件时,不能使用负的margin来移动盒子的位置。
6.使用Rax开发Native组件时,如果盒子的点击事件被前端处理了,这次点击就不会被客户端捕获,这一点可以用来防止用户因为误操作点击到按钮旁边,频繁唤起播控。可以在按钮下放一个稍大一些的空盒子,捕获这个盒子的点击事件,这样可以有效避免因误触唤起播控。
7.使用Rax开发Native组件时,不能使用z-index来控制元素的层级。
8.使用Rax开发Native组件时,不支持一些css3的属性,比如-webkit-mask-image,这个属性可以将盒子的一部分逐渐虚化。在播放器上使用的native组件一般会给具有透明度的大背景,这样为了避免遮挡正在播放的视频,在使用透明背景的情况下UI要想实现-webkit-mask-image的效果不能直接通过切一张渐变效果的图覆盖在大背景图上达到这个效果。因为两张都具有透明度的图层叠在一起,在视觉上会和单张相比存在差异,可以考虑在大背景图上使用高亮的切图作为替代方案。
9.在web上图片不设置大小会按照图片自身大小显示,但是在rax开发Native组件时,需要手动为图片设置大小,因为安卓上默认图片高度为0。