React Native中如何让重叠的兄弟组件按钮获得可点击优先级？

在React Native中使用styled-components时，存在两个兄弟容器组件FirstContain和SecondContain，各自包含按钮FirstButton和SecondButton。当前两个容器重叠，SecondButton被FirstButton遮挡无法点击，尝试设置zIndex和elevation未生效，需解决让SecondButton处于上层并可响应点击的问题。

用户代码如下：

import React from 'react';
import styled from "styled-components/native";
import { Text, View, StyleSheet } from "react-native";

const FirstContain = styled.View`
background-color: lightblue;
flex:1;
`;

const FirstButton = styled.TouchableOpacity`
width: 100px;
height: 40px;
background: lavender;
`;


const SecondContain = styled.View`
position: absolute;
background-color: lightgreen;
flex:1;
top:0;
bottom:0;
right:0;
left: 5%;
`;

const SecondButton = styled.TouchableOpacity`
width: 100px;
height: 40px;
background-color: lightpink;
`;

const App = () => {
  const firstConfunc = () => {
    console.log("firstConfunc");
  }

  const secondfunc = () => {
    console.log("secondconfuc");
  }
  return (
    <>
      <FirstContain>
        <FirstButton
          onPress={firstConfunc}>
          <Text>FirstContain</Text>
        </FirstButton>
      </FirstContain>

      <SecondContain>
        <SecondButton
          onPress={secondfunc}>
          <Text>secondContainer</Text>
        </SecondButton>
      </SecondContain>
    </>
  );
};

解决方案 #

问题核心是容器组件的层级关系：按钮的层级依赖于其父容器的层级，仅给按钮设置zIndex/elevation无效，需调整容器的层级：

给SecondContain添加z-index（针对iOS）和elevation（针对Android）属性，确保它的层级高于FirstContain：

const SecondContain = styled.View`
position: absolute;
background-color: lightgreen;
flex:1;
top:0;
bottom:0;
right:0;
left: 5%;
z-index: 10; /* iOS 层级控制 */
elevation: 10; /* Android 层级控制 */
`;

原理说明 #

虽然SecondContain是后渲染的兄弟组件，理论上默认层级更高，但FirstContain的flex:1会占据整个父容器空间，可能导致层级计算异常。显式设置更高的z-index和elevation可以确保SecondContain处于FirstContain之上，其内部的SecondButton自然就能响应点击。

若仍有问题，可给FirstContain显式设置较低的z-index（如z-index: 0），进一步明确层级关系。

内容的提问来源于stack exchange，提问作者user19476497