Expo中FlatList使用问题：多数据无法滚动且渲染失败

核心问题拆解 #

• FlatList完全不支持嵌套子组件（比如<FlatList><View>...</View></FlatList>这种写法直接无效），它靠data数据源和renderItem渲染函数生成列表项，这是你踩的第一个坑。
• 自闭合标签报错大概率是JSX语法不规范，或者漏了必填属性触发的语法检查提示，不是标签本身的问题。

完整正确示例（结合SafeAreaView） #

import { SafeAreaView, FlatList, View, Text, StyleSheet } from 'react-native';
import React from 'react';

export default function App() {
  // 模拟30条超出屏幕的测试数据
  const listData = Array.from({ length: 30 }, (_, index) => ({
    id: index.toString(),
    title: `列表项 ${index + 1}`
  }));

  // 单个列表项的渲染逻辑
  const renderListItem = ({ item }) => (
    <View style={styles.listItem}>
      <Text style={styles.itemText}>{item.title}</Text>
    </View>
  );

  return (
    <SafeAreaView style={styles.container}>
      {/* FlatList必须用自闭合标签，核心属性一个都不能少 */}
      <FlatList
        data={listData}
        renderItem={renderListItem}
        keyExtractor={(item) => item.id}
        // 可选：给列表内容加内边距
        contentContainerStyle={styles.listContainer}
      />
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#f5f5f5'
  },
  listContainer: {
    paddingVertical: 10
  },
  listItem: {
    backgroundColor: '#fff',
    padding: 15,
    marginHorizontal: 10,
    marginBottom: 8,
    borderRadius: 8
  },
  itemText: {
    fontSize: 16
  }
});

必懂关键属性 #

• data：必填，要渲染的数组数据源，没有它FlatList不知道要渲染什么。
• renderItem：必填，接收单条数据的函数，返回你要展示的列表项JSX。注意参数是个对象，得解构出item（当前项的数据）。
• keyExtractor：必填，给每个列表项生成唯一key，避免React渲染警告，优先用数据里的天然唯一ID（比如接口返回的id）。
• contentContainerStyle：可选，用来设置整个列表内容区的样式（比如内边距），别和FlatList自身的style搞混。

解决VS Code自闭合标签报错 #

如果写<FlatList />时编辑器报错，按这几步排查：

1. 确认data和renderItem这两个必填属性已经正确传入，缺属性很容易触发语法检查错误。
2. 检查属性写法：比如data={listData}要加大括号，不能写成data=listData。
3. 如果是ESLint误报，可以调整VS Code里的react/self-closing-comp规则，或者先确保代码逻辑正确后忽略提示。

避坑提醒 #

• 绝对不要给FlatList嵌套子组件，所有列表内容都得通过renderItem生成。
• 一定要给外层的SafeAreaView设置flex:1，不然FlatList可能占不满屏幕，导致滚动失效。
• 如果列表项高度固定，可以加initialNumToRender和maxToRenderPerBatch优化性能，这属于进阶操作。

内容的提问来源于stack exchange，提问作者L.Calvin