Android模拟器中FlatList无法滚动问题求助

给你几个针对性的排查和修复方案，按顺序尝试：

1. 给FlatList添加keyExtractor #

你的数据里有唯一id字段，但未给FlatList指定keyExtractor。在线编辑器可能兼容无此属性的情况，但模拟器对组件渲染的唯一性要求更严格，缺少它可能导致渲染异常进而影响滚动。

修改FlatList部分：

<FlatList
  horizontal
  data={stories}
  renderItem={singleStory}
  keyExtractor={(item) => item.id.toString()}
/>

2. 给容器设置明确的高度约束 #

你的SafeAreaView样式未设置高度，横向FlatList需要容器有确定的高度范围，否则组件无法正确计算滚动区域。修改styles里的container：

container: {
  borderColor: "grey",
  borderBottomWidth: 0.9,
  borderTopWidth: 0.9,
  height: 100, // 可根据需求调整，横向列表一般用固定高度
},

3. 检查模拟器触摸交互设置 #

• iOS模拟器：确保开启触摸模拟，可通过Hardware > Touch > Trackpad/Mouse as Trackpad切换手势识别模式
• Android模拟器：检查是否禁用了触摸输入，或直接重启模拟器测试

4. 排查手势冲突 #

如果项目中引入了react-native-gesture-handler等手势库，可能和FlatList的滚动手势冲突。可临时移除这类库的包裹组件，测试滚动是否恢复。

修改后的完整代码参考 #

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}
        keyExtractor={(item) => item.id.toString()}
      />
    </SafeAreaView>
  );
};

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

先尝试前两个修改，大概率能解决问题；如果仍无效，再检查模拟器设置和手势冲突。

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