React Native Android zIndex 高度无需重新排列

Question

我有一个带有带有stickyHeaderIndices 道具的滚动视图的应用程序 - 应用于文本输入。 在 iOS 中，元素按照 zIndex 和排列进行排列。 然而，在 Android 上，文本输入隐藏在其他元素的后面，这些元素在应用了高程的代码更深处排列，请参阅此视频以供参考。

似乎解决方案是在代码的更深处安排文本输入，但是文本输入的位置不正确。 更改 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容器的高度，使其具有比覆盖 textInput 的元素更高的高度值

Answer 1

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

是的。

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

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

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

您可能需要调整top值或其他一些 styles，但我认为这是 go 的方法。