React Native中FlatList渲染ListItem显示异常求助

问题原因 #

1. 百分比高度的错误使用：ListItem 中设置了 height: "10%"，在 FlatList 的列表项容器中，这个百分比的参考对象是列表项自身的容器（而非屏幕高度），而 FlatList 的列表项容器默认没有明确高度约束，导致高度计算异常，挤压内部内容。
2. 布局对齐未传递：SafeAreaView 上的 alignItems: center 不会自动传递给 FlatList 的内容容器，FlatList 默认内容容器宽度撑满，ListItem 的 width: "80%" 虽生效，但整体布局对齐逻辑未正确继承。

解决方案 #

1. 替换百分比高度为固定/自适应高度 #

修改 ListItem 的样式，将百分比高度替换为固定值或自适应高度，确保列表项有足够空间容纳内容：

const styles = StyleSheet.create({
  itemStyle: {
    flexDirection: "row",
    backgroundColor: "lightblue",
    width: "80%",
    // 替换 height: "10%" 为固定高度，或用 minHeight 实现自适应
    height: 80,
    borderRadius: 10,
    marginVertical: 5,
    alignItems: "center",
    paddingLeft: 10,
  },
  // 其余样式保持不变
});

2. 给 FlatList 设置内容容器对齐 #

在 FlatList 中添加 contentContainerStyle，让列表内容容器继承居中对齐逻辑，和直接在 View 中渲染的效果保持一致：

<FlatList
  data={items}
  keyExtractor={(item) => item.id.toString()}
  renderItem={({ item }) => (
    <ListItem title={item.title} subtitle={item.subtitle} />
  )}
  // 添加内容容器样式，实现居中对齐
  contentContainerStyle={{ alignItems: "center" }}
/>

完整修改后的 ListItem 样式示例 #

import { View, Text, Image, StyleSheet } from "react-native";

interface Props {
  title: string;
  subtitle: string;
}

function ListItem({ title, subtitle }: Props) {
  return (
    <View style={styles.itemStyle}>
      <Image
        style={styles.imageStyle}
        source={require("../assets/user.png")}
      />
      <View>
        <Text style={styles.titleStyle}>{title}</Text>
        <Text style={styles.subtitleStyle}>{subtitle}</Text>
      </View>
    </View>
  );
}

export default ListItem;

const styles = StyleSheet.create({
  itemStyle: {
    flexDirection: "row",
    backgroundColor: "lightblue",
    width: "80%",
    height: 80,
    borderRadius: 10,
    marginVertical: 5,
    alignItems: "center",
    paddingLeft: 10,
  },
  imageStyle: {
    width: 55,
    height: 55,
  },
  titleStyle: {
    fontSize: 20,
    fontFamily: "Avenir",
    fontWeight: "600",
    paddingLeft: 10,
  },
  subtitleStyle: {
    fontSize: 15,
    fontFamily: "Avenir",
    fontWeight: "400",
    paddingLeft: 10,
    color: "grey",
  },
});

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