React Native中FlatList滚动至末尾时如何将按钮固定在内容底部

出现组件重叠是两个布局配置遗漏导致的：

• 包裹FlatList的父级View未设置flex:1约束高度，FlatList无法正确计算可滚动区域边界，底部footer组件会溢出布局和其他元素重叠
• 列表内容区没有预留底部间距，最后一条列表项会和footer按钮直接贴死，产生视觉重叠

const Screen = () => {
  return (
    <View style={styles.container}>
      <Text style={styles.heading}>Screen Data</Text>
      {/* 占满标题下方的剩余屏幕空间，给FlatList明确的高度边界 */}
      <View style={{flex: 1}}>
        <FlatList
          data={data}
          // 给内容区加底部内边距，避免最后一项和按钮贴连
          contentContainerStyle={{paddingBottom: 24}}
          // 替换成你数据项里的唯一字段，避免列表渲染错位警告
          keyExtractor={(item) => item.id}
          renderItem={({item}) => (
            <View style={{paddingVertical: 12}}>
              <Text style={styles.title}>{item.title}</Text>
              <Text style={styles.description}>{item.description}</Text>
            </View>
          )}
          {/* 直接传组件节点即可，不需要套匿名函数，避免无效重渲染和位置计算异常 */}
          ListFooterComponent={<Buttons text={'你的按钮文案'} onPress={() => { /* 按钮点击逻辑 */ }} />}
        />
      </View>
    </View>
  );
};
export default Screen;

• 父容器加flex:1是React Native滚动类组件的必加配置，只有父容器明确了可用高度，FlatList才能正确划分滚动区域，从根源解决布局溢出重叠问题
• contentContainerStyle的内边距用来给列表内容和底部按钮留出呼吸空间，可根据你的设计稿调整数值
• 移除ListFooterComponent外层的箭头函数：直接传入组件元素可以减少列表刷新时的重复渲染，也能规避部分RN版本下footer位置计算错误的问题
• 补充keyExtractor属性：如果列表项没有唯一key标识，数据变动时很容易出现元素渲染位置错乱的问题

如果你要的效果是按钮固定在屏幕底部、不随列表滚动，不用放在ListFooterComponent里，直接和FlatList同级放在父容器底部即可，结构参考：

<View style={{flex: 1}}>
  <FlatList /* 其余配置不变，去掉ListFooterComponent */ />
  <Buttons text={''} onPress={undefined} />
</View>

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