React Native 组件之 FlatList-JavaScript中文网-JavaScript教程资源分享门户

React Native 是一种使用 JavaScript 和 React 来构建原生 iOS 和 Android 应用程序的框架，FlatList 是 React Native 中的一个组件，用于渲染长列表数据。本文将介绍 FlatList 的基本用法、属性和方法，以及一些实用的技巧和注意事项。

基本用法

FlatList 的基本用法很简单，只需要传入一个数组作为数据源，以及一个函数来渲染每一项数据即可。这个函数接收一个参数 item，表示当前项的数据，需要返回一个组件来展示这个数据。

// www.javascriptcn.com code example
import React, { Component } from 'react';
import { FlatList, Text, View } from 'react-native';

export default class MyFlatList extends Component {
  constructor(props) {
    super(props);
    this.state = {
      data: [
        { id: 1, name: 'Apple' },
        { id: 2, name: 'Banana' },
        { id: 3, name: 'Cherry' },
        { id: 4, name: 'Durian' },
      ],
    };
  }

  renderItem = ({ item }) => (
    <View style={{ padding: 10 }}>
      <Text>{item.name}</Text>
    </View>
  );

  render() {
    return (
      <FlatList
        data={this.state.data}
        renderItem={this.renderItem}
        keyExtractor={(item) => item.id.toString()}
      />
    );
  }
}

上面的代码定义了一个 MyFlatList 组件，它的数据源是一个数组，每一项数据包含一个 id 和一个 name 属性。renderItem 函数接收一个参数，这个参数是一个对象，包含当前项的数据和一些其他信息，例如索引和行数等。这个函数返回一个组件，用于渲染当前项的数据。keyExtractor 属性用于指定每一项数据的唯一标识符，这样 FlatList 就可以正确地更新和渲染列表了。

属性和方法

除了上面介绍的 data、renderItem 和 keyExtractor 属性之外，FlatList 还有很多其他的属性和方法，下面是一些常用的属性和方法。

属性

horizontal：是否水平滚动，默认为 false。
initialNumToRender：首次渲染的项数，默认为 10。
getItemLayout：用于指定每一项的高度和偏移量，优化滚动性能。
ListHeaderComponent 和 ListFooterComponent：分别用于渲染列表头部和尾部的组件。
onRefresh 和 onEndReached：分别用于下拉刷新和上拉加载更多的回调函数。
refreshing 和 onEndReachedThreshold：分别用于控制下拉刷新的状态和上拉加载更多的触发阈值。

方法

scrollToIndex：滚动到指定索引的项。
scrollToItem：滚动到指定的项。
scrollToOffset：滚动到指定的偏移量。
flashScrollIndicators：显示滚动条。

实用技巧和注意事项

在使用 FlatList 的过程中，有一些实用的技巧和注意事项，可以帮助我们更好地使用这个组件。

1. 使用分割线

默认情况下，FlatList 不会自动添加分割线，我们可以通过给 renderItem 函数返回的组件添加样式来实现分割线的效果。例如：

renderItem = ({ item }) => (
  <View style={{ padding: 10, borderBottomWidth: 1, borderBottomColor: '#ccc' }}>
    <Text>{item.name}</Text>
  </View>
);

2. 使用动态高度

如果每一项的高度不固定，可以使用 getItemLayout 属性来指定每一项的高度和偏移量，这样可以优化滚动性能。例如：

getItemLayout={(data, index) => ({ length: 50 + index * 20, offset: (50 + index * 20) * index, index })}

上面的代码指定了每一项的高度为 50 + index * 20，偏移量为 (50 + index * 20) * index，其中 index 表示当前项的索引。

3. 避免重复渲染

由于 FlatList 会根据数据源的变化来更新列表，如果每一项的数据都是一个新的对象，那么就会导致所有的项都重新渲染一遍，这样会影响性能。因此，我们应该尽量避免每一项数据的变化，例如可以使用 shouldComponentUpdate 或 PureComponent 来优化性能。

4. 使用外部状态管理

在实际开发中，我们通常会使用 Redux 或 MobX 等外部状态管理库来管理应用程序的状态。对于 FlatList，我们可以将数据源和其他状态存储在外部状态管理库中，这样可以方便地在不同的组件中共享状态，并且可以更好地控制数据的变化和更新。

示例代码

下面是一个完整的示例代码，演示了如何使用 FlatList 渲染一个包含图片和文本的列表，并实现了下拉刷新和上拉加载更多的功能。

// www.javascriptcn.com code example
import React, { Component } from 'react';
import { FlatList, Image, RefreshControl, StyleSheet, Text, View } from 'react-native';
import { connect } from 'react-redux';
import { fetchData, loadMoreData, refreshData } from './actions';

class MyFlatList extends Component {
  componentDidMount() {
    this.props.fetchData();
  }

  renderItem = ({ item }) => (
    <View style={styles.item}>
      <Image source={{ uri: item.thumbnailUrl }} style={styles.thumbnail} />
      <Text style={styles.title}>{item.title}</Text>
    </View>
  );

  handleRefresh = () => {
    this.props.refreshData();
  };

  handleLoadMore = () => {
    this.props.loadMoreData();
  };

  render() {
    const { data, refreshing, loading } = this.props;
    return (
      <FlatList
        data={data}
        renderItem={this.renderItem}
        keyExtractor={(item) => item.id.toString()}
        refreshControl={
          <RefreshControl refreshing={refreshing} onRefresh={this.handleRefresh} />
        }
        onEndReached={this.handleLoadMore}
        onEndReachedThreshold={0.5}
        ListFooterComponent={loading ? <Text style={styles.loading}>加载中...</Text> : null}
      />
    );
  }
}

const mapStateToProps = (state) => ({
  data: state.data,
  refreshing: state.refreshing,
  loading: state.loading,
});

const mapDispatchToProps = {
  fetchData,
  refreshData,
  loadMoreData,
};

const styles = StyleSheet.create({
  item: {
    flexDirection: 'row',
    alignItems: 'center',
    padding: 10,
    borderBottomWidth: 1,
    borderBottomColor: '#ccc',
  },
  thumbnail: {
    width: 50,
    height: 50,
    marginRight: 10,
  },
  title: {
    flex: 1,
    fontSize: 16,
  },
  loading: {
    textAlign: 'center',
    paddingVertical: 10,
  },
});

export default connect(mapStateToProps, mapDispatchToProps)(MyFlatList);

上面的代码使用了 Redux 来管理数据源和其他状态，fetchData、refreshData 和 loadMoreData 分别对应了获取数据、下拉刷新和上拉加载更多的操作。refreshControl 属性用于指定下拉刷新的控件，onEndReached 和 onEndReachedThreshold 属性用于指定上拉加载更多的触发条件，ListFooterComponent 属性用于指定加载更多时的提示信息。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/67d0e885a941bf71341efd03

React Native 组件之 FlatList