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

所以有两个类似的组件：

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

组件1和组件2都可以在视图中拖放。默认情况下，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>

---

为子组件设置动态

zIndex

似乎是一条可行之路。（）

我将存储状态中每个孩子的

zIndex

es。我会用一个可触摸组件包装

Component1

和

Component2

，如果它们还没有。开始拖放时，我会更新状态中存储的

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>
    );
  }
}

从“React”导入React；
进口{
样式表，
看法
}从“反应本机”；
const style=StyleSheet.create({
包装器：{
弹性：1，
位置：'相对'，
},
儿童：{
位置：'绝对'，
宽度：500，
身高：500，
},
});
类MyComponent扩展了React.Component{
构造函数（道具、上下文）{
超级（道具、背景）；
此.state={
reverseOrderOfChildren:false，
};
}
render（）{
const firstChild=
const secondChild=
if（this.state.reverseOrderOfChildren）{
返回(
{secondChild}
{firstChild}
);
}
返回(
{firstChild}
{secondChild}
);
}
}

我尝试过动态设置zIndex，但出于某种原因，我刚刚发现它在iOS上工作，但在android上不起作用。知道为什么吗？github上有一个相关的问题：可能是关于它的吗？他们说它在react native v0.48中得到了修复，但我仍然在v0.48.2中遇到了问题。我添加了一些代码，让您能够更好地理解我的问题。在引入

zIndex

样式选项之前，后面渲染的

视图（我的意思是在代码上，一个视图紧跟另一个视图）通常具有更高的
zIndex
。看起来android上的
zIndex
实现不起作用，旧的行为仍然有效（我没有运行并检查你的代码，我在考虑你的经验）。更改渲染视图的顺序是您的一个选项吗？我需要在这两个组件之间动态设置zIndex。所以，如果我按下box1，box1应该比box2得到更高的zIndex，反之亦然。