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

Question

我有一个带有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 的元素更高的高度值

Answer 1

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

是的。

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

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

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

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