如何通过Flex布局实现全屏高度的FlatList列表项（无需手动计算屏幕尺寸）

当然可以实现！其实不用手动获取屏幕尺寸来设置高度，靠Flex布局和FlatList的属性调整就能轻松搞定，我来给你一步步拆解方案：

核心思路 #

要让每个列表项自动占满全屏，关键是让FlatList本身占满整个屏幕空间，再让每个列表项拉伸填满FlatList的可用高度，彻底摆脱手动计算屏幕高度的麻烦。

修改后的完整代码 #

import React from 'react';
import {StyleSheet, View, FlatList, Text} from 'react-native';

const Flex = () => {
  const items = [
    {id: 1, name: 'item 1', backgroundColor: 'red'},
    {id: 2, name: 'item 2', backgroundColor: 'darkorange'},
    {id: 3, name: 'item 3', backgroundColor: 'green'},
    {id: 4, name: 'item 4', backgroundColor: 'blue'},
    {id: 5, name: 'item 5', backgroundColor: 'purple'},
  ];

  const renderItem = ({item}) => (
    <View style={[styles.item, {backgroundColor: item.backgroundColor}]}>
      <Text style={styles.text}>{item.name}</Text>
    </View>
  );

  return (
    <FlatList
      data={items}
      renderItem={renderItem}
      keyExtractor={item => item.id.toString()}
      pagingEnabled
      showsVerticalScrollIndicator={false}
      snapToAlignment="start"
      decelerationRate="fast"
      // 关键修改1：让FlatList占满全屏可用空间
      style={{flex: 1}}
    />
  );
};

const styles = StyleSheet.create({
  item: {
    // 关键修改2：用flex:1替代固定高度，自动填满FlatList高度
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  text: {
    color: 'white',
    fontSize: 24,
  },
});

export default Flex;

关键修改点说明 #

1. 给FlatList添加style={{flex:1}}
   默认FlatList会根据内容高度自适应，设置flex:1后，它会占满父容器的全部可用空间（一般App根容器都是全屏的，这个前提很容易满足）。

2. 列表项样式替换为flex:1
   删掉原来的height: Dimensions.get('window').height，换成flex:1，每个列表项就会自动拉伸到FlatList的高度——也就是屏幕高度，完美实现全屏效果。

3. 移除snapToInterval属性
   因为已经启用了pagingEnabled，FlatList会自动把每个列表项的高度作为分页单位，不需要再手动设置滚动间隔了。

额外注意事项 #

如果你的页面有导航栏、状态栏或者底部标签栏，内容可能被遮挡，这时候可以把FlatList放在SafeAreaView里，或者给列表项加对应内边距，确保内容在安全区域内：

import {SafeAreaView} from 'react-native';

// 在FlatList外层包裹SafeAreaView
return (
  <SafeAreaView style={{flex:1}}>
    <FlatList
      // ...其他属性
    />
  </SafeAreaView>
);

这样调整后，不管什么尺寸的设备，列表项都会自动适配全屏高度，再也不用操心手动计算屏幕尺寸的问题啦～

内容来源于stack exchange