用戶
 找回密碼
 立即注冊

QQ登錄

只需一步,快速開始

掃一掃,登錄網站

小程序社區 首頁 教程 實戰教程 查看內容

使用Rax開發Native組件踩坑總結

Rolan 2020-8-6 10:00

1.Rax在PC端以及手機豎屏時,屏幕寬度均為750rpx,但是在手機橫屏時,不同機型屏幕寬度可能不一樣。需要引入'@weex-module/dom'這個庫。具體使用方式如下:const dom = require('@weex-module/dom'); domdom.getCompo ...

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組件時,如果盒子的點擊事件被前端處理了,這次點擊就不會被客戶端捕獲,這一點可以用來防止用戶因為誤操作點擊到按鈕旁邊,頻繁喚起播控??梢栽诎粹o下放一個稍大一些的空盒子,捕獲這個盒子的點擊事件,這樣可以有效避免因誤觸喚起播控。

7.使用Rax開發Native組件時,不能使用z-index來控制元素的層級。

8.使用Rax開發Native組件時,不支持一些css3的屬性,比如-webkit-mask-image,這個屬性可以將盒子的一部分逐漸虛化。在播放器上使用的native組件一般會給具有透明度的大背景,這樣為了避免遮擋正在播放的視頻,在使用透明背景的情況下UI要想實現-webkit-mask-image的效果不能直接通過切一張漸變效果的圖覆蓋在大背景圖上達到這個效果。因為兩張都具有透明度的圖層疊在一起,在視覺上會和單張相比存在差異,可以考慮在大背景圖上使用高亮的切圖作為替代方案。

9.在web上圖片不設置大小會按照圖片自身大小顯示,但是在rax開發Native組件時,需要手動為圖片設置大小,因為安卓上默認圖片高度為0。

鮮花
鮮花
雞蛋
雞蛋
分享至 : QQ空間
收藏
原作者: 文武同志 來自: 掘金
梦幻单人赚钱方法 江苏十一选五走势图片 排列五 股票短线* 快乐赛车官网 上证指数年线是多少点上证指数5年走势图 安徽11选5玩法 幸运赛车可以网上买吗 重庆时时彩开奖软件 湖北快3形态走势图一定牛 幸运农场幸运3复式