React Native左侧Logo按钮布局问题：Logo占用过多空间致文本挤压

你的问题核心是Logo容器的flex:1属性抢占了过多空间，加上width:100%和height:100%的设置，导致文本被挤压。以下是针对性的优化方案：

关键修改点 #

• 移除image样式中的flex:1、width:"100%"，让Logo仅占用自身内容所需空间
• 保留height:"100%"让Logo高度适配按钮容器，配合resizeMode="contain"保证图片比例正常
• 可选：调整文本的textAlign，有Logo时左对齐更符合视觉习惯

修改后的完整代码 #

const Button = ({ onPress, children, fontColor='black', backgroundColor='white', fontSize, url, borderRadius=7, style}) => {
    const styles = StyleSheet.create({
        container: {
          flexDirection: 'row',
          backgroundColor: backgroundColor,
          paddingVertical: 10,
          paddingHorizontal: 10,
          borderRadius: borderRadius,
          justifyContent: url ? 'flex-start' : 'center',
          alignItems:'center',
        },
        image:{
            borderWidth:2,
            borderColor:"#000",
            height:"100%",
            resizeMode: "contain"
        },
        text: {
          borderWidth:2,
          borderColor:"#0000ff",
          color: fontColor,
          fontSize: fontSize,
          marginLeft: url ? 10 : 0,
          textAlign: url ? 'left' : "center"
        },
      });

  return (
    <TouchableOpacity style={[styles.container, style]} onPress={onPress}>
      {url && <Image source={url} style={styles.image}/>}
      <Text style={styles.text} adjustsFontSizeToFit={true}>{children}</Text>
    </TouchableOpacity>
  );
};

进阶优化（固定Logo尺寸） #

如果需要Logo保持固定大小，直接设置宽高即可，避免自适应可能带来的尺寸波动：

image:{
    borderWidth:2,
    borderColor:"#000",
    width: 28, // 根据需求调整尺寸
    height: 28,
    resizeMode: "contain"
},

内容的提问来源于stack exchange，提问作者Vénon