React Native侧边带图标双列布局内容溢出问题求解

溢出问题由三个flex用法错误直接导致：

• 最外层容器设置flex: 1会强制占满父容器全部剩余垂直空间，作为可堆叠的复用组件，这个属性会导致多个组件堆叠时互相挤压空间，引发布局错乱溢出
• 内部行容器设置flex: 0.5是按父容器剩余垂直空间按比例分配高度，而非跟随内容自适应高度，多行渲染时高度计算完全不符合预期
• 图片、文本元素未设置宽度约束和溢出适配规则，长内容、原始尺寸过大的图片会直接突破容器边界

完全匹配25%图标/75%文本的设计要求，天然支持垂直堆叠复用，无溢出问题：

export function TwoColumnIconLeft (props){
  const { title, subtitle, iconSource } = props;

  return (
    <View style={{ padding: 20, width: '100%' }}>
      <View 
        style={{ 
          flexDirection: "row", 
          width: "100%",
          alignItems: "flex-start"
        }}
      >
        {/* 左侧25%宽度图标区域 */}
        <View style={{ width: "25%", paddingRight: 8 }}>
          <Image 
            style={{ width: "100%", height: 48, resizeMode: "contain" }} 
            source={iconSource || require("./../Assets/watermelon.png")}
          />
        </View>
        {/* 右侧75%宽度文本区域 */}
        <View style={{ width: "75%", flexShrink: 1 }}>
          <Text style={styles.title}>{title}</Text>
          {subtitle && <Text style={styles.subTitle}>{subtitle}</Text>}
        </View>
      </View>
    </View>
  );
};

• 直接用百分比width: "25%"、width: "75%"明确划分两栏宽度，完全对齐Figma设计标注，比flex比例计算更稳定无偏差
• 移除所有容器上不合理的flex数值属性，组件高度随内容自适应，多个组件上下堆叠时会自然按顺序排列，不会出现空间抢占、溢出问题
• 图片增加resizeMode: "contain"属性，确保图片会在25%宽度的容器内自适应缩放，不会按原始尺寸渲染撑破布局
• 文本区域增加flexShrink: 1属性，长文本会自动换行，不会超出75%宽度的容器边界
• 抽离了图标源入参，组件复用性更强

如果需要渲染数十行以上的同类结构，直接将该组件作为FlatList的renderItem使用即可，滚动和渲染性能更优。

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