React Native Android zIndex 提升而不重新排列

Posted 2023-02-24

【中文标题】React Native Android zIndex 提升而不重新排列

【英文标题】：React Native Android zIndex elevation without rearranging

【发布时间】：2020-12-10 15:30:52

【问题描述】：

我有一个带有stickyHeaderIndices 属性的滚动视图的应用程序 - 应用于文本输入。在 ios 中，元素是根据 zIndex 和排列来排列的。然而，在 android 上，文本输入隐藏在其他元素的后面，这些元素在代码中更深地排列并应用了高度，请参阅this video for reference。

似乎解决方案是在代码的更深处安排文本输入，但是文本输入的位置不正确。更改 zIndex、禁用高程、禁用绝对定位以及为文本输入提供更高的高程值也不会更改分层。文本输入的简要样式：

  search: 
    zIndex: 100,
    position: "absolute",
    top: -16,
    elevation: 9,
    paddingVertical: 12,
    alignSelf: "center",
  

覆盖文本输入的图块的简要样式：

tile: 
    backgroundColor: colors.white,
    padding: 16,
    elevation: 8,
    zIndex: -5,
  ,

有什么方法可以防止文本输入隐藏在图块后面？如果需要任何其他代码参考，请告诉我。

编辑：解决方案是调整 textInput container 的高度，使其具有比覆盖 textInput 的元素更高的高度值

【参考方案1】：

似乎解决方案是在代码的更深处安排文本输入

是的。

当您无法重新排列元素在屏幕上呈现的顺序时，使用 zIndex 是一个很好的解决方案。由于您的搜索栏是绝对定位的，我假设您不关心组件在代码中的位置，所以我建议将它放在最底部。所以是这样的：

<View style=flex: 1>
  <Flatlist [... your list of items here] >
  <SearchBar style=styles.search />
</View>

但是文本输入的位置不正确。

您可能需要调整top 值或其他一些样式，但我认为这是要走的路。

【讨论】：

这最终没有起到作用，增加 textInput 容器的高程值起到了作用，无论如何谢谢！