React Native Dimensions在Android设备异常，无法实现类Ins Reel全屏布局

你的代码存在几个关键问题导致无法在所有设备上正常运行，以下是具体修复方案：

问题分析与修复要点 #

• 拼写错误：Dimesnions是拼写错误，正确应为Dimensions，该错误会导致无法正确获取屏幕高度。
• 高度计算忽略安全区域：直接用window.height减去tabBar高度，未考虑StatusBar、设备刘海及底部安全区的影响，在异形屏设备上会出现内容遮挡或留白。
• 静态尺寸不支持动态变化：Dimensions.get('window')是静态值，设备旋转时不会自动更新，建议用useWindowDimensions钩子获取响应式屏幕尺寸。
• FlatList配置不完善：需明确设置滚动方向、隐藏滚动指示器，同时确保FlatList占满父容器空间。

完整修复代码 #

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

const HomeScreen = ({ navigation }) => {
  const dataArray = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19];
  const { height: windowHeight } = useWindowDimensions();
  // 若使用react-navigation底部导航，可替换为useBottomTabBarHeight钩子动态获取高度
  const bottomtabBarHeight = 50;

  const renderItem = ({ item, index }) => {
    // 计算Item可用高度：屏幕总高度 - 状态栏高度 - 底部导航栏高度
    const itemHeight = windowHeight - StatusBar.currentHeight - bottomtabBarHeight;
    return (
      <View style={[styles.itemContainer, { height: itemHeight }]}>
        <Text style={styles.itemText}>{item}</Text>
      </View>
    );
  };

  return (
    <SafeAreaView style={styles.container}>
      <StatusBar />
      <FlatList
        data={dataArray}
        renderItem={renderItem}
        pagingEnabled
        decelerationRate="fast"
        vertical
        showsVerticalScrollIndicator={false}
        style={styles.flatList}
      />
    </SafeAreaView>
  );
};

export default HomeScreen;

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  flatList: {
    flex: 1,
  },
  itemContainer: {
    borderBottomColor: 'black',
    borderBottomWidth: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  itemText: {
    fontSize: 24,
    fontWeight: 'bold',
  },
});

补充说明 #

• useWindowDimensions会自动响应屏幕尺寸变化（如设备旋转），比静态的Dimensions.get更适配多场景。
• 若使用react-navigation的底部导航，可通过useBottomTabBarHeight钩子（需安装@react-navigation/bottom-tabs）动态获取导航栏高度，避免硬编码：

  import { useBottomTabBarHeight } from '@react-navigation/bottom-tabs';
  // 组件内使用：
  const bottomtabBarHeight = useBottomTabBarHeight();
  

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