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

c 复制代码
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;
相关推荐
超级白的小白21 小时前
Taro崩溃排查
前端·react native
朝阳391 天前
React Native【实战范例】登录页(含密码显示隐藏)
react native
EndingCoder2 天前
React Native 项目实战 —— 记账本应用开发指南
javascript·react native·react.js
程序员小张丶2 天前
基于React Native的HarmonyOS 5.0房产与装修应用开发
javascript·react native·react.js·房产·harmonyos5.0
程序员小刘2 天前
HarmonyOS 5对React Native有哪些新特性?
react native·华为·harmonyos
朝阳392 天前
React Native【实战范例】银行卡(含素材)
react native
EndingCoder2 天前
React Native 构建与打包发布(iOS + Android)
android·react native·ios
William Dawson2 天前
【React Native 性能优化:虚拟列表嵌套 ScrollView 问题全解析】
react native·react.js·性能优化
EndingCoder2 天前
React Native 性能优化实践
react native·react.js·性能优化