React Native布局问题：TouchableOpacity宽度超出容器半数及卡片重叠问题的解决

一、先搞定卡片宽度超出预期的核心问题 #

从你的代码细节来看，导致黄色TouchableOpacity占比过大的原因有两个：

1. SmallMateriCard外层的Box用了maxW={"70%"}，这会让卡片本身最大宽度达到父容器的70%，直接挤占了一行内第二个卡片的空间；
2. 包裹卡片的TouchableOpacity没有明确宽度约束，会自适应卡片的宽，进一步放大了布局混乱的问题。

调整方案分两步：

1. 修改SmallMateriCard的宽度规则

把卡片外层Box的maxW={"70%"}改成width={"100%"}，让卡片完全填充父容器的宽度：

// SmallMateriCard组件内
<Box width={"100%"} alignItems="flex-start" style={{backgroundColor:"blue"}}>
  {/* 原有代码保持不变 */}
</Box>

2. 给TouchableOpacity设置固定占比

在页面的TouchableOpacity样式里添加宽度设置，让每个卡片容器刚好占橙色容器的一半（如果需要间距可以微调数值）：

<TouchableOpacity key={key} style={{
    backgroundColor:"yellow",
    width: "50%", // 每个容器占一行的1/2
    paddingHorizontal: 4 // 可选：添加左右间距，避免卡片紧挨着
  }}>
  {/* 原有代码保持不变 */}
</TouchableOpacity>

调整后橙色容器内的卡片就能整齐地一行排列两个，黄色容器的占比也会符合预期。

二、解决折叠时卡片重叠的后续问题 #

和可展开组件集成后出现折叠重叠，是因为容器高度变化时，超出容器范围的卡片部分没有被裁剪。只需要给橙色容器加一行属性就能解决：

<View style={[mixins.margin(16,16), layout.display.flex, layout.justify.between, {
    backgroundColor:"orange",
    flexDirection: 'row',
    flexWrap: 'wrap',
    overflow: 'hidden' // 添加这一行，折叠时自动裁剪超出部分
  }]}>
  {/* 卡片列表代码 */}
</View>

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