FlatList Items 水平布局

在 React Native 中，FlatList 是一个用于高性能渲染大型数据列表的组件。FlatList组件的默认布局方式是垂直的，但是在某些情况下，我们可能需要将列表项水平排列。这时，我们可以通过修改FlatList中的属性来实现。

实现方法

我们可以将 horizontal 属性设置为 true 来实现FlatList水平布局。此外，还需要设置 ItemSeparatorComponent 来加入水平方向的分隔符。

import React from 'react';
import { FlatList, StyleSheet, Text, View } from 'react-native';

export default function App() {
  const data = [
    { id: 1, name: 'Apple' },
    { id: 2, name: 'Banana' },
    { id: 3, name: 'Cherry' },
    { id: 4, name: 'Durian' },
    { id: 5, name: 'Eggfruit' },
    { id: 6, name: 'Fig' },
    { id: 7, name: 'Grape' },
    { id: 8, name: 'Honeydew' },
  ];

  const renderSeparator = () => {
    return <View style={styles.separator} />;
  };

  const renderItem = ({ item }) => {
    return <Text style={styles.item}>{item.name}</Text>;
  };

  return (
    <FlatList
      data={data}
      renderItem={renderItem}
      ItemSeparatorComponent={renderSeparator}
      keyExtractor={item => item.id.toString()}
      horizontal={true}
    />
  );
}

const styles = StyleSheet.create({
  separator: {
    width: 10,
  },
  item: {
    padding: 10,
    fontSize: 18,
    height: 44,
    backgroundColor: 'lightgray',
    borderRadius: 10,
  },
});

代码分析

在上述代码中，我们创建了一个名为 renderSeparator 的函数组件，它返回一个 <View> 组件，用于对列表项进行水平分隔。此外，我们还创建了一个名为 renderItem 的函数组件，它返回一个 <Text> 组件，用于呈现每个数据项。

在 FlatList 组件中，我们将数据源传递给 data 属性，将用于呈现每个数据项的组件传递给 renderItem 属性。我们使用 ItemSeparatorComponent 属性设置分隔符，使用 horizontal 属性将列表项排列方式修改为水平排列。

我们还使用 keyExtractor 属性，将列表项的唯一标识符设置为数据项的 id，以确保 React Native 在进行列表项更新和重排时能够高效地确定每个列表项的位置。

结语

通过将 horizontal 属性设置为 true ，我们可以轻松地实现FlatList组件的水平布局。有了这个知识，我们可以更加自如地设计和开发与列表相关的应用程序。