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;
相关推荐
Misha韩10 小时前
React Native 初始化项目和模拟器运行
react native
Misha韩2 天前
React Native 亲切的组件们(函数式组件/class组件)和陌生的样式
react native·函数式组件·class组件
1234Wu2 天前
React Native 接入 eCharts
javascript·react native·react.js
wen's3 天前
React Native 0.79.4 中 [RCTView setColor:] 崩溃问题完整解决方案
javascript·react native·react.js
朝阳394 天前
ReactNative【实战系列教程】我的小红书 3 -- 自定义底栏Tab导航(含图片选择 expo-image-picker 的使用)
react native
冰冷的bin4 天前
【React Native】自定义倒计时组件CountdownView
react native
朝阳3914 天前
React Native【实用教程】(含图标方案,常用第三库,动画,内置组件,内置Hooks,内置API,自定义组件,创建项目等)
react native
朝阳3914 天前
React Native【实战范例】同步跟随滚动
react native
朝阳3916 天前
React Native【详解】动画
react native
朝阳3917 天前
React Native【详解】内置 API
react native