React Native中FlatList渲染空白是怎么回事？

UX-敏涵提问于 2026-03-30 01:15:14 阅读 2

框架

我用FlatList渲染一个简单的列表，数据明明有，但屏幕上啥也不显示，控制台也没报错，真的搞不懂了。

试过加keyExtractor、改flex:1，还检查了data是不是数组，都没用。下面是我的代码：

const MyList = () => {
  const data = [{id: '1', name: 'Alice'}, {id: '2', name: 'Bob'}];
  return (
    <FlatList
      data={data}
      renderItem={({item}) => <Text>{item.name}</Text>}
      keyExtractor={item => item.id}
    />
  );
};

Redux

我来解答赞 2 收藏

反馈

1 条解答

令狐馨予 Lv1

看起来问题出在 Text 组件的样式上。在React Native里，Text 默认不会撑开父容器的高度，所以即使有内容也不会显示出来。性能上这确实是个常见坑。

简单改一下，在 Text 外面包一层 View，并给 View 设置个高度或者让 Text 本身有合适的样式：

const MyList = () => {

  const data = [{id: '1', name: 'Alice'}, {id: '2', name: 'Bob'}];

  return (

    <FlatList

      data={data}

      renderItem={({item}) => (

        <View style={{height: 40, justifyContent: 'center'}}>

          <Text>{item.name}</Text>

        </View>

      )}

      keyExtractor={item => item.id}

    />

  );

};

这样每个列表项都有固定高度，文本也会居中显示。别小看这些细节，性能优化很多时候就是靠解决这种看似不起眼的小问题积少成多来的。再检查下父组件是不是也有样式问题，有时候外层布局也会影响显示效果。

2026-03-30 02:02