React Native布局问题：如何实现两个元素并排显示

看起来你遇到的是React Native默认布局方向导致的垂直堆叠问题——默认情况下，View的flexDirection属性是column，所以所有子元素会自动垂直排列，这就是为什么你的TEST文本跑到侧边菜单下方去了。

要让TEST文本和侧边菜单（也就是你的Workspace组件）紧邻并排显示，只需要把这两个元素包裹在一个设置了flexDirection: 'row'的View容器里，就能强制它们横向排列。

给你修改后的代码示例：

import { View, ScrollView, Text, Dimensions } from 'react-native';

// ...你的组件定义

<View style={{flex: 1, width: Dimensions.get('window').width, height: Dimensions.get('window').height}}>
  {/* 横向排列容器：侧边菜单 + TEST及主内容 */}
  <View style={{flexDirection: 'row', flex: 1}}>
    {/* 侧边菜单组件，如果需要固定宽度可以添加width属性 */}
    <Workspace img={require('./images/quarto.png')}/>
    
    {/* TEST文本 + 滚动内容区域，flex:1让它占据剩余屏幕宽度 */}
    <View style={{flex: 1}}>
      <Text>TEST</Text>
      <ScrollView style={{flex: 1}}>
        <Header>
          <HeaderItem img={require('./images/camera.png')}/>
          {/* ...你的其他Header内容 */}
        </Header>
        {/* ...ScrollView里的其他内容 */}
      </ScrollView>
    </View>
  </View>
</View>

关键要点说明： #

• flexDirection: 'row'：这是核心设置，把容器内的子元素从垂直排列改成水平排列。
• flex: 1：给TEST所在的容器添加这个属性，让它自动占据侧边菜单之外的剩余屏幕宽度，避免内容被挤压变形。如果你的侧边菜单有固定宽度（比如200），也可以直接给Workspace设置style={{width: 200}}，布局会更稳定。
• 外层容器保持flex:1：确保整个布局占满屏幕空间，避免出现滚动或布局截断的问题。

如果还有布局错位的情况，可以检查一下Workspace组件内部的样式，确保它没有设置过大的宽度或者flex:1，否则会挤占TEST区域的空间。

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