React Native使用Fetch从API取数后无需FlatList渲染

核心调整思路 #

• 移除原代码中引入的FlatList组件，不再使用虚拟列表的懒加载渲染逻辑
• 利用数组原生的map方法遍历已请求到的全量数据，直接将遍历生成的组件节点作为父容器的子元素输出
• 针对内容溢出无法滚动的问题，用ScrollView作为内容承载容器，保证超出屏幕高度的内容可以正常滑动浏览

调整后可直接运行的完整代码 #

import React, { useEffect, useState } from 'react';
import { ActivityIndicator, ScrollView, Text, View } from 'react-native';

export default App = () => {
  const [isLoading, setLoading] = useState(true);
  const [data, setData] = useState([]);

  useEffect(() => {
    fetch('https://reactnative.dev/movies.json')
      .then((response) => response.json())
      .then((json) => setData(json.movies))
      .catch((error) => console.error(error))
      .finally(() => setLoading(false));
  }, []);

  return (
    <View style={{ flex: 1, padding: 24 }}>
      {isLoading ? (
        <ActivityIndicator size="large" />
      ) : (
        <ScrollView style={{ flex: 1 }}>
          {data.map(item => (
            <Text 
              key={item.id} 
              style={{ paddingVertical: 12, borderBottomWidth: 1, borderBottomColor: '#f0f0f0' }}
            >
              {item.title}, {item.releaseYear}
            </Text>
          ))}
        </ScrollView>
      )}
    </View>
  );
};

实用注意提示 #

• 该实现方式为全量一次性渲染，适配单页数据量较小（20条以内）的场景，当数据量过大时会因为一次性创建过多节点导致页面卡顿、内存占用升高
• 遍历渲染时必须给每个列表项设置全局唯一的key值，作用和FlatList的keyExtractor一致，能够帮助React精准识别节点的更新变化，避免不必要的重渲染
• 若业务场景不需要内容滚动效果，可直接将外层的ScrollView替换为普通View，所有数据节点会直接平铺在父View容器内

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