React Native中两个View左右布局失效，右侧View消失问题排查

核心问题 #

React Native 的 View 组件不支持 Web CSS 里的 float 属性，你给左侧 View 设置的 float: 'left' 是无效样式。再加上父 View 没启用横向 Flex 布局，导致右侧带 flex:1 的 View 无法正常占据空间，最终出现“消失”的情况。

修正方案 #

用 React Native 标准的 Flexbox 布局实现左右排列，代码调整如下：

return (
  <View style={{ 
    width: '100%', 
    flexDirection: 'row',  // 设置横向排列
    justifyContent: 'space-between',  // 子元素左右两端对齐
    alignItems: 'center'  // 垂直方向居中，可选优化
  }}>
    <View>
      <Avatar.Icon
        size={iconSize}
        name="md-beer" type="ionicon"
        color="blue"
        style={{
          backgroundColor: '#00aced',
          width: customAvtardimension,
          height: customAvtardimension,
        }}
      />
    </View>
    <View style={{ fontSize: 16, lineHeight: 30, color: '#1D2359' }}>
      <Button icon="camera" />
    </View>
  </View>
)

关键调整说明 #

• 父 View 添加 flexDirection: 'row'：把默认的垂直布局改成横向，让两个子 View 在同一行显示
• 用 justifyContent: 'space-between' 替代 float：自动让两个子 View 分别贴紧容器的左右边缘
• 移除无效的 float: 'left' 和多余的 flex:1：避免样式冲突，让布局逻辑更清晰
• 可选添加 alignItems: 'center'：让两个子元素在垂直方向居中对齐，提升整体视觉一致性

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