Flatlist 滚动在 android 仿真器上不起作用

Question

我试图创建一个水平平面列表。 下面的代码可以在在线编辑器中使用，但不能在我的模拟器中使用。 我无法弄清楚问题是由于我的代码还是模拟器造成的。 我尝试删除水平属性，但它仍然不能垂直工作。 我用 ScrollView 替换了 SafeAreaView 但我得到了相同的结果。 控制 styles 并删除所有 styles 并在没有 styles 的情况下进行测试，但我再次无法滚动它。

export const Stories = () => {
  const stories = [
    {
      id: 1,
      name: "Name1",
      image: "https://xsgames.co/randomusers/avatar.php?g=male",
    },
    {
      id: 2,
      name: "Name2",
      image: "https://xsgames.co/randomusers/avatar.php?g=female",
    },
    {
      id: 3,
      name: "Name3",
      image: "https://xsgames.co/randomusers/avatar.php?g=pixel ",
    },
    {
      id: 4,
      name: "Name4",
      image: "https://xsgames.co/randomusers/avatar.php?g=pixel ",
    },
    {
      id: 5,
      name: "Name5",
      image: "https://xsgames.co/randomusers/avatar.php?g=pixel ",
    },
    {
      id: 6,
      name: "Name6",
      image: "https://xsgames.co/randomusers/avatar.php?g=pixel ",
    },
    {
      id: 7,
      name: "Name7",
      image: "https://xsgames.co/randomusers/avatar.php?g=pixel ",
    },
    {
      id: 8,
      name: "Name8",
      image: "https://xsgames.co/randomusers/avatar.php?g=pixel ",
    },
    {
      id: 9,
      name: "Name9",
      image: "https://xsgames.co/randomusers/avatar.php?g=pixel ",
    },
  ];

  const singleStory = ({ item }) => {
    return (
      <View style={styles.story}>
        <View style={styles.avatarContainer}>
          <Image source={{ uri: item.image }} style={styles.avatar} />
        </View>
        <Text>{item.name}</Text>
      </View>
    );
  };

  return (
    <SafeAreaView style={styles.container}>
      <FlatList
        horizontal
        data={stories}
        renderItem={singleStory}
      />
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  container: {
    borderColor: "grey",
    borderBottomWidth: 0.9,
    borderTopWidth: 0.9,
  },
  story: {
    padding: 10,
    alignItems: "center",
  },
  avatarContainer: {
    height: 60,
    width: 63,
    justifyContent: "center",
    alignItems: "center",
  },
  avatar: {
    borderRadius: 50,
    height: 50,
    width: 50,
  },
});

Answer 1

在容器中添加 flex:1，因为您需要修复视图的尺寸

container: {
    borderColor: "grey",
    borderBottomWidth: 0.9,
    borderTopWidth: 0.9,
   flex:1
  },

Answer 2

我创建了一个新的模拟器，它可以工作。