React Native【实战范例】水平滚动分类 FlatList

import React from "react";
import { FlatList, SafeAreaView, StyleSheet, Text, View } from "react-native";
interface itemType {
  id: string;
  title: string;
  icon: string;
}
// 水平滚动数据
const horizontalData: itemType[] = [
  { id: "1", title: "电影", icon: "🎬" },
  { id: "2", title: "音乐", icon: "🎵" },
  { id: "3", title: "书籍", icon: "📚" },
  { id: "4", title: "游戏", icon: "🎮" },
  { id: "5", title: "体育", icon: "⚽" },
  { id: "6", title: "美食", icon: "🍔" },
  { id: "7", title: "旅行", icon: "✈️" },
  { id: "8", title: "科技", icon: "📱" },
];
const HorizontalFlatList = () => {
  // 渲染水平列表项
  const renderHorizontalItem = ({ item }: { item: itemType }) => (
    <View style={styles.horizontalItem}>
      <Text style={styles.iconText}>{item.icon}</Text>
      <Text style={styles.horizontalTitle}>{item.title}</Text>
    </View>
  );
  return (
    <SafeAreaView style={styles.container}>
      <View style={styles.section}>
        <Text style={styles.sectionTitle}>水平滚动分类</Text>
        <FlatList
          data={horizontalData}
          renderItem={renderHorizontalItem}
          keyExtractor={(item) => item.id}
          horizontal
          showsHorizontalScrollIndicator={false}
          contentContainerStyle={styles.horizontalContent}
        />
      </View>
    </SafeAreaView>
  );
};
const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#f5f5f5",
  },
  section: {
    marginBottom: 20,
  },
  sectionTitle: {
    fontSize: 18,
    fontWeight: "bold",
    padding: 15,
  },
  horizontalContent: {
    paddingHorizontal: 15,
  },
  horizontalItem: {
    alignItems: "center",
    marginRight: 20,
    padding: 10,
    backgroundColor: "#ffffff",
    borderRadius: 15,
    shadowColor: "#000",
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.1,
    shadowRadius: 2,
  },
  iconText: {
    fontSize: 24,
    marginBottom: 5,
  },
  horizontalTitle: {
    fontSize: 14,
  },
});
export default HorizontalFlatList;