# native-component

Some of the components in the Mini Program are native components created by the client.

# Native component

Some of the components in the Mini Program are native components created by the client. These components are:

# Native component same-layer rendering

The same layer rendering is to solve the problem of the level of native components. After the same level rendering is supported, native components and other components can be superimposed at will, and the restrictions on the level will no longer exist. It should be noted, however, that the internals of the component are still rendered natively, and styles are generally not valid for native internals.All current native components except input assembly focus The same layer rendering is supported.

# Restrictions on the use of native components

In addition to event correlation, the following restrictions are removed from the same layer rendering

The native component is detached from the WebView Outside of the rendering process and therefore with the following limitations when used:

  • The level of native components istallestSo other components in the page are set regardless of z-index How much, can not overwrite the native components.
    • The inserted native component can override the previous native component.
  • Native components are not available in picker-view Used in.
  • part CSS Styles cannot be applied to native components, such as
    • Unable to set native component CSS animation
    • Cannot define native components as position: fixed
    • Cannot be used on parent nodes overflow: hidden To crop the display area of the native component
  • Event listening for native components cannot be used bind:eventname Only supports the bindeventnameNative components are also not supported catch and capture The event binding method of the.
  • Native components block vConsole Popup debug panel.

In the tool, the native component is simulated by the web component, so many cases can not restore the performance of the real machine very well. It is suggested that developers try to debug the native components on the real device when they use them.

# cover-view and cover-image

To address the top-level limitation of native component hierarchy. The Mini Program specifically provides cover-view and cover-image Component that can be overridden in apartOn the native component. These two components are also native components, but use restrictions differ from other native components.

# Relative hierarchy of native components

There are no following problems under the same layer rendering

In order to adjust the relative hierarchy between native components, the Mini Program v2.7.0 And above supports declaration in styles z-index To specify the hierarchy of native components. this z-index Adjust the hierarchy order between native components only, whose hierarchy is stillgreater thanOther non-native components.