小程序原生组件使用限制

小程序当中多个原生组件显示问题

最近在开发小程序的过程中。使用到小程序地图组件，地图全页展示，在地图上展示其他组件，其他组件可能不展示的问题。

关于原生组件使用原则，使用微信小程序使用规则：

原生组件的使用限制
由于原生组件脱离在 WebView 渲染流程外，因此在使用时有以下限制：

原生组件的层级是最高的，所以页面中的其他组件无论设置 z-index 为多少，都无法盖在原生组件上。
后插入的原生组件可以覆盖之前的原生组件。
原生组件还无法在  中使用。
基础库 2.4.4 以下版本，原生组件不支持在 、、 中使用。
部分CSS样式无法应用于原生组件，例如：
无法对原生组件设置 CSS 动画
无法定义原生组件为 position: fixed
不能在父级节点使用 overflow: hidden 来裁剪原生组件的显示区域
原生组件的事件监听不能使用 bind:eventname 的写法，只支持 bindeventname。原生组件也不支持 catch 和 capture 的事件绑定方式。
在iOS下，原生组件暂时不支持触摸相关事件。
原生组件会遮挡 vConsole 弹出的调试面板。
在工具上，原生组件是用web组件模拟的，因此很多情况并不能很好的还原真机的表现，建议开发者在使用到原生组件时尽量在真机上进行调试。

在这儿解释下以下组件作用。

Mapz为地图组件，页面全屏展示地图组件。

Pointer地图上弹窗显示，默认隐藏

ShareComponent分享页面入口按钮，该页面为倒计时

Notification跑马灯信息展示

isDebug 控制页面是否显示地图组件

正确代码展示

render() {
    // jsx eslint
    const { enlData, isOpened } = this
    const isDebug = this.debugVersion
    return (
      
        {
          isDebug ?  : (
            
              
              
                
              
              
              
              {/*  */}
            
          )
        }
      
    )
  }

视图展示：

image

上面的代码，将地图与地图上显示的浮层放在一起，显示无问题.....但是，如果将地图层上的浮层与地图组件分离开布局，如以下代码

  render () {
    // jsx eslint
    const { enlData, isOpened } = this
    const isDebug = this.debugVersion
    return (
      
    
          {
            isDebug?:
          }
          
          {
            !isDebug && 
                
            
          }
          
          
          
      
    )
  }

同之前不同的是，isDebug将根据情况显示地图组件与发红包按钮。其他组件直接展示。。

在此时页面展示如下：

小程序原生组件.png

现在Notification 与 shareComponent组件已经消失不见了。。。那么为什么会这样呢？

根据实际问题反馈：出现这样的问题原因在与，Mapz的显示是通过isdebug来决定的,而isDebug的值可能会通过setState进行改变造成重新渲染页面。因此mapz可能会在其他组件之后渲染；在Mapz渲染之前，shareComponet组件已经在Mapz组件之前渲染了，所以导致shareComponent组件被Mapz组件所遮盖的问题。因而得出以下结论：

原生组件的先后顺序不是布局上的先后顺序，而是渲染的先后顺序；后渲染的组件将会覆盖之前的组件与代码布局逻辑上的出现先后无关