React Native容器无法占满剩余高度，Flex子项间距不均问题

核心问题 #

ScrollView 的子元素默认不会自动占满其可用高度，因为 ScrollView 是为滚动内容设计的，你直接给内部黄色 View 设置 flex:1 和 height:'100%' 不会生效，反而会导致布局异常。

具体修改步骤 #

1. 调整 ScrollView 的样式设置：
   把 ScrollView 的 style 里的 height:'100%' 去掉，改用 contentContainerStyle 控制内容容器布局，给它设置 flex:1，这样内容容器会占满 ScrollView 的整个可用高度。

2. 修正黄色容器的样式：
   移除黄色 View 的 height:'100%'，只保留 flex:1 和 justifyContent: 'space-evenly'，此时它会自动占满 ScrollView 内容容器的高度。

3. 调整 Card 的样式：
   如果希望卡片均匀分布且高度适配，把 Card 的 flexGrow:1 去掉，保留 flex:1 即可（保证每个卡片高度一致且填满剩余空间）；如果只是希望卡片间均匀间隔，也可以去掉 Card 的 flex:1，让卡片保持自身高度，靠父容器的 justifyContent: 'space-evenly' 分配间距。

修改后的完整代码 #

// Screen component
return (
  <SafeAreaView style={{ backgroundColor: 'black', flex: 1 }}>
    <StatusBar
      barStyle={isDarkMode ? 'light-content' : 'dark-content'}
      backgroundColor={backgroundStyle.backgroundColor}
    />
    <ScrollView
      style={{ backgroundColor: 'pink' }}
      contentContainerStyle={{ flex: 1 }}>
      <View
        style={{
          backgroundColor: 'yellow',
          flex: 1,
          justifyContent: 'space-evenly',
        }}>
        {surveyData?.surveys?.map((surveyDetails, i) => (
          <Card key={`suvey-card-${i}`} style={{ flex: 1, marginVertical: 8 }}>
            <Card.Title
              title={surveyDetails.name}
              right={(props) => <Icon {...props} source="folder" />}
            />
          </Card>
        ))}
      </View>
    </ScrollView>
  </SafeAreaView>
);

补充说明 #

如果你的 surveyData.surveys 数据量很大需要滚动，justifyContent: 'space-evenly' 可能导致底部出现多余空白，这种情况下可以去掉黄色 View 的 justifyContent，改用 gap: 16 来设置卡片间距，既保证间距均匀，又不影响滚动布局。

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