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;
相关推荐
朝阳395 小时前
React Native【实战范例】登录页(含密码显示隐藏)
react native
EndingCoder14 小时前
React Native 项目实战 —— 记账本应用开发指南
javascript·react native·react.js
程序员小张丶18 小时前
基于React Native的HarmonyOS 5.0房产与装修应用开发
javascript·react native·react.js·房产·harmonyos5.0
程序员小刘18 小时前
HarmonyOS 5对React Native有哪些新特性?
react native·华为·harmonyos
朝阳3918 小时前
React Native【实战范例】银行卡(含素材)
react native
EndingCoder19 小时前
React Native 构建与打包发布(iOS + Android)
android·react native·ios
William Dawson19 小时前
【React Native 性能优化:虚拟列表嵌套 ScrollView 问题全解析】
react native·react.js·性能优化
EndingCoder19 小时前
React Native 性能优化实践
react native·react.js·性能优化
cccjh19 小时前
列表性能优化居然会导致曝光错误?RN FlatList removeClippedSubviews 踩坑实录
react native