在 React Native 中渲染 FlatList 时出现问题

Question

我正在自学 React，并尝试使用 FlatList。由于某种原因，我的列表没有按预期呈现。我有一些列表“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")}
      ></Image>
      <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: "10%",
    borderRadius: 10,
    margin: 5,
    alignItems: "center", // aling vertically
    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",
  },
});

这是我渲染它们的视图（尚未使用 FlatList）：

import {
  SafeAreaView,
} from "react-native";
import Constants from "expo-constants";
import ListItem from "./ListItem";

function FlatListScreen() {
  return (
    <SafeAreaView
      style={{
        flex: 1,
        alignItems: "center",
        backgroundColor: "#E2F0FB",
        paddingTop: Constants.statusBarHeight,
      }}
    >
      <ListItem title="William I" subtitle="Changed England forever"></ListItem>
      <ListItem
        title="Henry VIII"
        subtitle="Weird dude with lots of wives"
      ></ListItem>
      <ListItem title="Richard I" subtitle="Known as the Lionheart"></ListItem>
    </SafeAreaView>
  );
}

结果正如我所料：

但是当我尝试在 FlatList 中显示它时，它就会出现错误并且扭曲。这是代码：

import { SafeAreaView, FlatList, View } from "react-native";
import Constants from "expo-constants";
import ListItem from "./ListItem";

function FlatListScreen() {
  // Prepare array data for FlatList

  const items = [
    {
      id: 1,
      title: "William I",
      subtitle: "Changed England forever",
    },
    {
      id: 2,
      title: "Henry VIII",
      subtitle: "Weird dude with lots of wives",
    },
    {
      id: 3,
      title: "Richard I",
      subtitle: "Known as the Lionheart",
    },
  ];

  return (
    <SafeAreaView
      style={{
        flex: 1,
        alignItems: "center",
        backgroundColor: "#E2F0FB",
        paddingTop: Constants.statusBarHeight,
      }}
    >
      <FlatList
        data={items}
        keyExtractor={(item) => item.id.toString()}
        renderItem={({ item }) => (
          <ListItem title={item.title} subtitle={item.subtitle}></ListItem>
        )}
      ></FlatList>
    </SafeAreaView>
  );
}

export default FlatListScreen;

但这就是使用 FlatList 时的显示方式：

这是非常基本的代码，所以我不明白为什么这些项目都被压扁和扭曲。请帮忙。

Answer 1

我查看了你的代码，我注意到错误可能潜伏在哪里。看起来

height

样式属性是这里的罪魁祸首。

height: 20%

将 ListItem 组件的高度设置为

FlatList

高度的 20%，这就是您的

ListItems

看起来被压缩的原因。另外，我也去掉了

width: 80%

，这样它就可以占据 FlatList 组件 100% 的宽度。我对您的代码进行了更改，并进行了一些小的重构：

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

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>
  );
}

const styles = StyleSheet.create({
  itemStyle: {
    flexDirection: "row",
    backgroundColor: "lightblue",
    borderRadius: 10,
    margin: 5,
    alignItems: "center", // aling vertically
    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",
  },
});

import { FlatList } from "react-native";

function FlatListScreen() {
  // Prepare array data for FlatList

  const renderItem = ({ item }: { item: Props }) => {
    return <ListItem title={item.title} subtitle={item.subtitle} />;
  };

  return (
    <FlatList
      data={items}
      keyExtractor={(item) => item.id.toString()}
      renderItem={renderItem}
    />
  );
}

export default FlatListScreen;