React Native：选择时的 Z 索引

Question

有很多关于 z 索引和图层排序的帖子，但是 none 有很多解决方案。根据需要分层很容易，但是如果您需要动态层重新排序，它就会成为一个问题。 Like for example I have four moveable elements, when one is selected it should move above the others but they are already in set order so each moves under the other.

如果它们按渲染顺序分层，那么活动项目如何移动到前面并移动到其他三个之上？

Answer 1

您可以通过更改组件的渲染顺序来解决此问题。假设您有一些要在数组中呈现的项目和所选项目的索引，因此您的呈现方法可能如下所示：

render() {
  const items = ....;
  const selectedIndex = ...;
  return (
    <View>
      {items.filter((item, index) => index != selectedIndex)}
      {items[selectedIndex]}
    </View>
  );  
}

这样您选择的项目将始终最后呈现并位于其他项目之上。

React Native：选择时的 Z 索引

React Native: Z Index on selection

z-index

react-native