了解如何在 Expo 和 React Native 应用中使用 zIndex 堆叠重叠视图。

---

zIndex 是 CSS 的 z-index 属性 的 Expo 和 React Native 模拟，它允许开发者控制组件相互显示的顺序。

¥zIndex is the Expo and React Native analog of CSS's z-index property which lets the developer control the order in which components are displayed over one another.

默认 zIndex 行为

¥Default zIndex behavior

如果不指定显式 zIndex 或 position，树中较晚出现的组件将具有更高的 z 顺序。

¥Without specifying an explicit zIndex or position, components that occur later in the tree have a higher z-order.

Result

当组件在视觉上彼此交叉时，这一点会更清楚地说明。

¥This is illustrated more clearly when the components visually intersect each other.

Result

更改元素的 zIndex

¥Changing the zIndex of an element

如果要更改组件的堆叠方式而不更改其在组件树中出现的顺序，请使用 zIndex：

¥If you want to change how a component stacks without changing the order in which it occurs in the component tree, use zIndex:

Result

手动定位你的组件

¥Manually positioning your component

除了指定组件的堆叠方式之外，你还可以通过将子组件上的 position 属性更改为 'absolute' 并使用样式属性 top、right 指定它与其父组件之间的距离，从而打破组件的父组件设置的默认布局 、bottom 和 left。

¥Along with specifying how the component will stack, you can break out of the default layout set by the component's parent by changing the position property on the child component to 'absolute' and specifying the distance it should be from its parent with the style properties top, right, bottom, and left.

Result

你甚至可以使组件扩展到父级的视觉边界之外。

¥You can even make the component extend outside of the parent's visual bounds.

Result

虽然 position: 'absolute' 组件可能看起来独立运行，但它仍然必须尊重其父组件的 zIndex。

¥While a position: 'absolute' component may seem like it operates independently, it must still respect the zIndex of its parent.

Result