React Native【实战范例】网格导航 FlatList

c 复制代码
import React from "react";
import {
  FlatList,
  Image,
  SafeAreaView,
  StyleSheet,
  Text,
  View,
} from "react-native";
interface GridItem {
  id: string;
  title: string;
  imageUrl: string;
}
// 网格布局数据
const gridData = Array.from({ length: 30 }, (_, i) => ({
  id: `grid-${i}`,
  title: `项目 ${i + 1}`,
  imageUrl: `https://picsum.photos/seed/${i}/200/200`,
}));
const GridFlatList = () => {
  // 渲染网格列表项
  const renderGridItem = ({ item }: { item: GridItem }) => (
    <View style={styles.gridItem}>
      <Image
        source={{ uri: item.imageUrl }}
        style={styles.gridImage}
        resizeMode="cover"
      />
      <Text style={styles.gridTitle}>{item.title}</Text>
    </View>
  );
  return (
    <SafeAreaView style={styles.container}>
      <View style={styles.section}>
        <Text style={styles.sectionTitle}>网格导航</Text>
        <FlatList
          data={gridData}
          renderItem={renderGridItem}
          keyExtractor={(item) => item.id}
          numColumns={3}
          contentContainerStyle={styles.gridContent}
        />
      </View>
    </SafeAreaView>
  );
};
const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#f5f5f5",
  },
  section: {
    marginBottom: 20,
  },
  sectionTitle: {
    fontSize: 18,
    fontWeight: "bold",
    padding: 15,
  },
  iconText: {
    fontSize: 24,
    marginBottom: 5,
  },
  gridContent: {
    paddingHorizontal: 5,
  },
  gridItem: {
    width: "33.33%",
    padding: 5,
  },
  gridImage: {
    width: "100%",
    height: 100,
    borderRadius: 8,
  },
  gridTitle: {
    fontSize: 12,
    textAlign: "center",
    marginTop: 5,
  },
});
export default GridFlatList;
相关推荐
Misha韩16 小时前
React Native 亲切的组件们(函数式组件/class组件)和陌生的样式
react native·函数式组件·class组件
1234Wu16 小时前
React Native 接入 eCharts
javascript·react native·react.js
wen's2 天前
React Native 0.79.4 中 [RCTView setColor:] 崩溃问题完整解决方案
javascript·react native·react.js
朝阳392 天前
ReactNative【实战系列教程】我的小红书 3 -- 自定义底栏Tab导航(含图片选择 expo-image-picker 的使用)
react native
冰冷的bin3 天前
【React Native】自定义倒计时组件CountdownView
react native
朝阳3912 天前
React Native【实用教程】(含图标方案,常用第三库,动画,内置组件,内置Hooks,内置API,自定义组件,创建项目等)
react native
朝阳3913 天前
React Native【实战范例】同步跟随滚动
react native
朝阳3914 天前
React Native【详解】动画
react native
朝阳3916 天前
React Native【详解】内置 API
react native
xx240616 天前
React Native学习笔记
笔记·学习·react native