如何解决FlatList无法滚动且出现橡皮筋效应的问题？

1. 直接禁用弹性回弹 #

在FlatList组件中添加bounces={false}属性，关闭原生的橡皮筋回弹效果：

<FlatList
    style={{flexGrow: 1}}
    data={user}
    showsVerticalScrollIndicator={false}
    bounces={false} // 禁用橡皮筋效应
    renderItem={({ item }) => {
        return <Post item={item} />;
    }}
/>

2. 检查父容器布局约束 #

确保FlatList的直接父容器设置了flex: 1，让它能占满可用空间，避免因布局未约束导致的滚动异常：

• 避免父容器仅用height: '100%'却没有上层布局的flex支撑，优先使用flex布局分配空间

3. 排查嵌套滚动问题 #

检查<Post>组件内部是否嵌套了ScrollView或其他滚动容器，多层滚动嵌套也可能触发异常的橡皮筋回弹，必要时禁用子组件的滚动功能。

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