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 的方法。