动态地将一个组件放在另一个组件（更高的zIndex）之前

Question

所以有两个组件是这样的：

<View>
  <Component1 />
  <Component2 />
</View>

两者，Component1＆amp; Component2可以在View中拖放。默认情况下，Component2将在Component1上方呈现（因为它位于堆栈中的上方）。我想这样做，以便每当我按下Component1（用于拖放）时它会动态地进入Component2（更高的zIndex），如果我按下Component1并拖放，Component1就会出现在Component2的前面。

任何人都知道如何做到这一点？

编辑1：

我使用zIndex，但出于某种原因，它在iOS上工作但不在Android上工作。这是基本代码：

<View>
    <View style={{position:'absolute',zIndex:2,backgroundColor:'red',width:500,height:500}}/>
    <View style={{position:'absolute',zIndex:1,backgroundColor:'green',width:500,height:500,marginLeft:50}}/>
</View>

Answer 1

为子组件设置动态zIndex看起来像是要走的路。 （zIndex on docs）

我会将每个孩子的zIndex es存储在州内。如果它们还没有，我会用Component1和Component2包含一个可触摸的组件。当拖动＆amp;放弃开始，我会更新状态中存储的zIndex，以便所需的孩子有更高的zIndex。

由于我并不完全知道您如何构建组件及其布局，因此我无法提供示例代码。

修改

在Android上缺少zIndex实施的解决方法

如果没有别的办法，我会这样做：

import React from 'react';
import {
  StyleSheet,
  View,
} from 'react-native';

const style = StyleSheet.create({
  wrapper: {
    flex: 1,
    position: 'relative',
  },
  child: {
    position: 'absolute',
    width: 500,
    height: 500,
  },
});

class MyComponent extends React.Component {
  constructor(props, context) {
    super(props, context);

    this.state = {
      reverseOrderOfChildren: false,
    };
  }

  render() {
    const firstChild = <View style={[style.child, {backgroundColor: 'red'}]} />
    const secondChild = <View style={[style.child, {backgroundColor: 'green'}]} />

    if (this.state.reverseOrderOfChildren) {
      return (
        <View style={style.wrapper}>
          {secondChild}

          {firstChild}
        </View>
      );
    }

    return (
      <View style={style.wrapper}>
        {firstChild}

        {secondChild}
      </View>
    );
  }
}