Reactjs 如何在屏幕中的所有视图上浮动视图

检查此处的沙盒示例：

我有一个可拖动的组件，用户应该将其拖放到写答案旁边 我已将屏幕划分为3个视图或容器 问题是，当用户将答案放在第三个视图/组件上时，它将不再可捕获。我想这是因为zIndex的级别，我试图让zIndex工作，但没有成功+我不能使用绝对位置，它将符文的设计，我已经设置了背景颜色不同的颜色

    render() {
     return (
  <View style={styles.mainContainer}>

    <View style={styles.titleContainer}>
      <Text style={styles.textlarge}>Match
        <Text style={styles.text}> Match the image with the matching text :</Text>
      </Text>
    </View>

    <View style={styles.imagesContainer}>
      {/* images here  */}
      <Draggable style={styles.draggable} imageurl={require(drugs)} moveY={120} moveX={40} answerId={1} qtrue={q1true} />
      <Draggable imageurl={require(nomobile)} moveY={140} moveX={80} answerId={2} qtrue={q2true} />
      <Draggable imageurl={require(speedlimit)} moveY={120} moveX={40} answerId={1} qtrue={q1true} />
      <Draggable imageurl={require(streetwork)} moveY={120} moveX={40} answerId={1} qtrue={q1true} />
    </View>

    <View style={styles.answersContainer}>
      {/* answers here */}
      <View style={styles.questionContainer}>
        <View style={styles.dropZone}></View>
        <View style={styles.questionTextContainer}>
          <Text style={styles.questionTextLarge}>WE ALWAYS drive safely and legally: <Text style={styles.questionTextSmall}>we never use a handheld mobile device when driving</Text></Text>
        </View>
      </View>
      <View style={styles.questionContainer}>
        <View style={styles.dropZone}></View>
        <View style={styles.questionTextContainer}>
          <Text style={styles.questionTextLarge}>WE ALWAYS drive safely and legally: <Text style={styles.questionTextSmall}>we always obey the speed limit</Text></Text>
        </View>
      </View>
      <View style={styles.questionContainer}>
        <View style={styles.dropZone}></View>
        <View style={styles.questionTextContainer}>
          <Text style={styles.questionTextLarge}>WE NEVER <Text style={styles.questionTextSmall}>work under the influence of alcohol or drugs</Text></Text>
        </View>
      </View>
      <View style={styles.questionContainer}>
        <View style={styles.dropZone}></View>
        <View style={styles.questionTextContainer}>
          <Text style={styles.questionTextLarge}>NEVER <Text style={styles.questionTextSmall}>undertake any street or underground work activities unless competent to do so</Text></Text>
        </View>
      </View>
    </View>

  </View>
);
   }


    const styles = StyleSheet.create({
     mainContainer: {
     flex: 1,
     flexDirection: 'column',
     justifyContent: 'flex-start',
     alignItems: 'stretch',
     padding: DEVICE_WIDTH * 0.03,
     backgroundColor: '#EE82EE',
     zIndex: 1,
   },
   dropZone: {
     width: CIRCLE_RADIUS * 2,
     height: CIRCLE_RADIUS * 2,
     borderStyle: "solid",
     borderWidth: 3,
     borderColor: "#cccccc",
     borderRadius: CIRCLE_RADIUS,
     zIndex: 1,
   },
   titleContainer: {
     flexDirection: 'row',
     backgroundColor: '#00BFFF',
     flex: 2,
     paddingTop: DEVICE_HEIGHT * 0.03,
     flexWrap: 'wrap',
   },
   textlarge: {
     fontSize: 28,
     fontWeight: "bold",
     fontStyle: "normal",
     lineHeight: 25,
     letterSpacing: 0,
     color: "#e60000",
     flexWrap: 'wrap',
   },
   text: {
     fontSize: 21,
     fontWeight: "bold",
     fontStyle: "normal",
     lineHeight: 25,
     letterSpacing: 0,
     color: "#4c464e",
     flexWrap: 'wrap',
   },
   imagesContainer: {
     backgroundColor: 'yellow',
     flex: 2,
     flexDirection: 'row',
     justifyContent: 'space-between',
     zIndex: 1,
   },
   answersContainer: {
     flexDirection: 'column',
     flex: 8,
     zIndex: 1,
   },
   questionContainer: {
     flexDirection: 'row',
     flex: 1,
     zIndex: 1,
   },
   questionTextContainer: {
     flex: 3,
     marginLeft: 10,
     zIndex: 0,
   },
   questionTextLarge: {
     flexWrap: 'wrap',
     backgroundColor: '#C0C0C0',
     fontSize: 16,
     fontWeight: "bold",
     fontStyle: "normal",
     letterSpacing: 0,
     color: "#4b464d",
   },
   questionTextSmall: {
     flexWrap: 'wrap',
     fontSize: 16,
     fontWeight: "normal",
     fontStyle: "normal",
     lineHeight: 20,
     letterSpacing: 0,
     color: "#4b464d"
   },
   draggable: {
     zIndex: 100,
     position: 'absolute',
   }
 });

render（）{
返回(
匹配
将图像与匹配的文本匹配：
{/*此处的图像*/}
{/*答案在这里*/}
我们总是安全合法地驾驶：我们开车时从不使用手持移动设备
我们总是安全合法地驾驶：我们总是遵守限速
我们从不在酒精或毒品的影响下工作
除非有能力，否则不得从事任何街道或地下作业活动
);
}
const styles=StyleSheet.create({
主容器：{
弹性：1，
flexDirection:'列'，
justifyContent:“flex start”，
对齐项目：“拉伸”，
填充：设备宽度*0.03，
背景色：“#EE82EE”，
zIndex:1，
},
dropZone：{
宽度：圆半径*2，
高度：圆半径*2，
边框样式：“实心”，
边框宽度：3，
边框颜色：“#中交”，
边界半径：圆的半径，
zIndex:1，
},
标题容器：{
flexDirection:'行'，
背景颜色：“#00bff”，
弹性：2，
填充顶：装置高度*0.03，
flexWrap:“wrap”，
},
文本大：{
尺寸：28，
fontWeight：“粗体”，
fontStyle:“正常”，
线高：25，
字母间距：0，
颜色：“e60000”，
flexWrap:“wrap”，
},
正文：{
尺寸：21，
fontWeight：“粗体”，
fontStyle:“正常”，
线高：25，
字母间距：0，
颜色：#4c464e“，
flexWrap:“wrap”，
},
图像容器：{
背景颜色：“黄色”，
弹性：2，
flexDirection:'行'，
justifyContent:'之间的空间'，
zIndex:1，
},
答：联系人：{
flexDirection:'列'，
弹性：8，
zIndex:1，
},
问题容器：{
flexDirection:'行'，
弹性：1，
zIndex:1，
},
问题文本容器：{
弹性：3，
边缘左：10，
zIndex:0，
},
问题文本大：{
flexWrap:“wrap”，
背景颜色：“#C0”，
尺寸：16，
fontWeight：“粗体”，
fontStyle:“正常”，
字母间距：0，
颜色：“4b464d”，
},
问题文本小：{
flexWrap:“wrap”，
尺寸：16，
fontWeight:“正常”，
fontStyle:“正常”，
线高：20，
字母间距：0，
颜色：“4b464d”
},
可拖动：{
zIndex:100，
位置：'绝对'，
}
});

问题容器：zIndex:-1将解决您的问题

问题容器：zIndex:-1将解决您的问题