1. The screen width of Rax is 750rpx for BOTH PC and mobile phone in portrait mode, but the screen width may be different for different models in landscape mode. The library ‘@weex-module/dom’ needs to be introduced. The specific usage is as follows:
const dom = require('@weex-module/dom');
dom&&dom.getComponentRect&&dom.getComponentRect('viewport'.option= >{
this.setState({
scale:option.size.width/667})});Copy the code
Width is used to obtain the width of the screen, 667 is the width of the design, scale is equivalent to the size of the design, remember to multiply this scale if you need to use the size later.
2. When using Rax to develop Native components, Text cannot be directly wrapped with View tag, but needs to be wrapped with Text tag. The Text wrapped with View cannot be displayed on ios, but can be normally displayed in PC, Alipay mini program and wechat mini program.
3. When using Rax to develop Native components, when the size of the picture exceeds the size of the outer box, the part of the picture beyond the box can be normally displayed on ios, but the part of the picture beyond the size of the box will not be displayed on Android.
4. In Rax, it is possible to bind onAppear events to tags to bury exposure points, but in the development of the bottom voting component, if the outer box is fixed, the onAppear event may not trigger properly on the player. Consider manually reporting in the didMount lifecycle function.
5. When developing Native components with Rax, negative margin should not be used to move the position of the box.
6. When using Rax to develop Native components, if the click event of the box is processed by the front end, this click will not be captured by the client, which can be used to prevent the user from clicking next to the button by mistake and arousing the broadcast control frequently. You can place a slightly larger empty box under the button and capture the click event of this box, thus effectively preventing the playback control from being triggered by accidental touch.
7. When developing Native components using Rax, you cannot use z-Index to control the hierarchy of elements.
8. When developing Native components using Rax, some CSS3 attributes are not supported, such as -webkit-mask-image, which can gradually blur part of the box. The native component used in the player generally has a large background with transparency. In this way, in order to avoid blocking the playing video, in the case of transparent background, the UI cannot directly achieve the effect of -webkit-mask-image by cutting a picture with gradient effect and overlaying it on the large background image. Consider using a highlighted slice on a large background as an alternative, since two images with transparency are stacked on top of each other and look visually different than a single image.
9. On the Web, pictures will be displayed according to their own size if they are not set. However, when raX develops Native components, it is necessary to set the size of pictures manually, because the default height of pictures on Android is 0.