React-Native FlatList出现白屏不加载数据该如何解决？

核心错误原因 #

你代码中FlatList的renderItem属性回调函数使用了带花括号的箭头函数，但没有显式返回渲染的JSX元素，相当于返回undefined，因此没有内容被渲染，最终出现白屏。

修复方案 #

两种修改方式任选其一即可：

方式1：使用箭头函数隐式返回

去掉renderItem回调里的花括号，改用小括号包裹返回的JSX：

<FlatList
  data={datas}
  keyExtractor={(item, index) => index.toString()}
  renderItem={({item}) => (
    <View>
      <Text>{item.name}</Text>
      <Text>{item.phone}</Text>
      <Text>{item.email}</Text>
      <Text>{item.salary}</Text>
      <Text>{item.position}</Text>
    </View>
  )}
/>

方式2：显式添加return语句

保留原有花括号结构，在内部补充return关键字：

<FlatList
  data={datas}
  keyExtractor={(item, index) => index.toString()}
  renderItem={({item}) => {
    return (
      <View>
        <Text>{item.name}</Text>
        <Text>{item.phone}</Text>
        <Text>{item.email}</Text>
        <Text>{item.salary}</Text>
        <Text>{item.position}</Text>
      </View>
    )
  }}
/>

其他可选排查点 #

如果修改后仍无法正常显示，可依次检查以下项：

• 确认已经正确从react-native包中导入View、Text、FlatList组件，导入语句示例：import { View, Text, FlatList } from 'react-native'
• 确认FlatList的父容器添加了flex: 1样式，保证容器有足够高度承载列表内容
• 检查是否存在自定义样式将列表或列表项设置为透明、或偏移到可视区域外

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