把一個組件在另一個（較高zIndex的）的前動態

Question

因此有兩個組件排序是這樣的：

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

兩者的Component1 & COMPONENT2能拖動，然後在視圖中刪除。默認情況下，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換成可觸摸組件。當拖動&開始下降時，我會更新存儲在該狀態下的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> 
    ); 
    } 
}