React Native：Z选择索引

Question

关于z索引和图层排序的帖子很多，但没有很多解决方案。它很容易根据需要对事物进行分层，但如果需要动态层重新排序则会成为一个问题。例如，我有四个可移动元素，当选择一个时，它应该移动到其他元素之上，但它们已经按照设置顺序，因此每个元素都在另一个元素下移动。

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

Answer 1

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

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

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