React Native系列实践：实现列表

React Native官方核心组件中可实现列表的有： SrollView、flatlist、SectionList和virtualizedlist，在此我们实现最合适的flatlist组件实现。

flatlist 长列表列表

官方文档

reactnative.dev/docs/flatli…

实现

import { Text, View, FlatList, StyleSheet } from "react-native";
import React, { useEffect, useState } from "react";
// 定一个ts接口 包含id和title
interface Item {
  id: string;
  title: string;
}

const arr: Array<Item> = []
for (let i = 0; i < 100; i++) {
  arr.push({
    id: i.toString(),
    title: `Item ${i}`,
  })
}





export default function Index() {
  const [list, setList] = useState<Array<Item>>([])
  useEffect(() => {
    setTimeout(() => {
      setList(arr)
    }, 2000);
  }, [])

  const renderItem = ({ item }: { item: Item }) => {
    return (
      <View style={styles.item}>
        <Text style={styles.text}>{item.title}</Text>
      </View>
    )
  }
  return (
    <View style={styles.container}>
      <FlatList data={list} renderItem={renderItem} scrollEnabled={true}
        keyExtractor={item => item.id}
      >

      </FlatList>
    </View>
  );
}


const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  item: {
    padding: 20,
    backgroundColor: '#000000',
  },
  text: {
    color: '#fff',
  }

})

遇到的问题

• 列表超过一屏，无法滚动

在FlatList 组件上加入style:flex:1  以及其父组件加上同等的样式  即可！！！

SrollView和FlatList选择哪一个

SrollView组件一次性渲染所有的子组件，这样会降低性能。

FlatList延迟渲染，当项目即将出现时才渲染，当项目滚出屏幕后，会被删除，这样会节省内存和处理时间，类似虚拟列表。

SectionList 分组长列表

SectionList支持分组渲染长列表

virtualizedlist 虚拟列表

virtualizedlist组件用于高效的渲染大型列表数据。它通过只渲染当前可见区域的列表项，而不是一次性渲染整个列表，从而提高了性能和响应速度。virtualizedlist会根据用户的滚动行为动态加载和卸载列表项，这样可以减少内存占用，并且在处理大量数据时保持流畅的滚动体验。

virtualizedlist是FlatList和SectionList的基础组件。

ActivityIndicator 加载中

上面列表可增加附加功能，即列表数据请求中，显示loading图标。具体实现如下：

import { StyleSheet, Text, View, FlatList, ActivityIndicator } from "react-native";
import React, { useEffect, useState } from "react";
// 定一个ts接口 包含id和title
interface Item {
  id: string;
  title: string;
}

const arr: Array<Item> = []
for (let i = 0; i < 100; i++) {
  arr.push({
    id: i.toString(),
    title: `Item ${i}`,
  })
}



export default function Index() {
  const [list, setList] = useState<Array<Item>>([])
  const [isLoading, setIsLoading] = useState<boolean>(false)

  const fetchData = async () => {
    setIsLoading(true)
    setTimeout(() => {
      setList(arr)
      setIsLoading(false)
    }, 2000);
  }
  useEffect(() => {
    fetchData()
  }, [])


  const renderItem = ({ item }: { item: Item }) => {
    return (
      <View style={styles.item}>
        <Text style={styles.text}>{item.title}</Text>
      </View>
    )
  }
  // when fetching data，show loading icon
  const renderLoading = () => {
    if (!isLoading) return null
    return (
      <View style={styles.loadingContainer}>
        <ActivityIndicator animating={isLoading} size={"large"} color={"yellow"} />
      </View>
    )
  }
  return (
    <View style={styles.container}>

      {renderLoading()}
      <FlatList data={list} renderItem={renderItem} scrollEnabled={true}
        keyExtractor={item => item.id}
      >
      </FlatList>


    </View >
  );
}


const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  item: {
    padding: 20,
    backgroundColor: '#000000',
  },
  text: {
    color: '#fff',
  },
  loadingContainer: {
    position: 'absolute',
    left: 0,
    right: 0,
    top: 0,
    bottom: 0,
    alignItems: 'center',
    justifyContent: 'center',
    zIndex: 100,
  }

})