# 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:
camera
canvas
input
native component only in focuslive-player
live-pusher
map
textarea
video
# 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.
- Base library 2.4.4 Native components are not supported in scroll-view、swiper、movable-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 thebindeventname
Native 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.