React Native FlatList子项均匀分布适配剩余屏幕高度无需滚动如何实现？

核心调整逻辑 #

不需要滚动FlatList，所以首先禁用滚动能力，再通过flex布局+动态计算子项高度实现均匀铺满剩余空间： #

第一步：修改App.js文件 #

• 新增状态存储头部下方可用区域的高度
• 给包裹FlatList的外层View添加flex:1占满剩余空间，同时绑定onLayout事件获取可用高度
• 禁用FlatList的滚动能力，给子项传递动态计算的高度

import { useState } from 'react';
// 其余import保持原有逻辑不变

// 组件内部代码
const [availableHeight, setAvailableHeight] = useState(0);

return (
    <View style = {styles.container}>
      <Header appName='Intelligent Assistant'/>
      {/* 外层View占满头部之外的所有剩余空间 */}
      <View 
        style={{flex: 1}}
        onLayout={e => setAvailableHeight(e.nativeEvent.layout.height)}
      > 
        <FlatList 
          data={useCases} 
          scrollEnabled={false} // 禁用滚动
          contentContainerStyle={{flexGrow: 1}} // 确保列表内容占满容器
          renderItem = {({item}) => {
            // 计算每个子项的高度，避免除以0的异常
            const itemHeight = useCases.length ? availableHeight / useCases.length : 0;
            return <Usecase useCase={item} itemHeight={itemHeight} />
          }}
          />
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex : 1 ,
    paddingTop : 60,
  },
});

第二步：修改Usecase.js文件 #

接收传递的高度参数，调整样式让子项撑满对应高度，内容居中：

const Usecase = ({useCase, itemHeight}) => {
    return (
        <TouchableOpacity style = {[styles.useCase, {height: itemHeight}]}>
            <View style = {styles.useCaseView}>
                {/* 加numberOfLines避免文字过多溢出，可按需调整 */}
                <Text style = {styles.useCaseText} numberOfLines={2}>{useCase.description}</Text>
            </View>
        </TouchableOpacity>
    )
}

const styles = StyleSheet.create({
    useCase : {
        // 移除固定上下padding避免挤压内容空间，保留水平padding适配边距
        paddingHorizontal: 15,
        backgroundColor : '#f8f8f8',
        borderBottomWidth : 1,
        borderColor : '#eee',
    },
    useCaseView : {
        flex: 1, // 占满父组件高度
        flexDirection : 'column',
        alignItems:'center',
        justifyContent:'center',
    },
});

补充说明 #

如果用例数量过多导致文字显示不全，可以适当调整Text组件字号，或是保留少量垂直padding适配内容展示。

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