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><FlatListdata={horizontalData}renderItem={renderHorizontalItem}keyExtractor={(item) => item.id}horizontalshowsHorizontalScrollIndicator={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;