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;
相关推荐
歪歪1003 天前
React Native开发Android&IOS流程完整指南
android·开发语言·前端·react native·ios·前端框架
歪歪1003 天前
React Native开发有哪些优势和劣势?
服务器·前端·javascript·react native·react.js·前端框架
勤劳打代码3 天前
触类旁通 —— Flutter 与 React 对比解析
前端·flutter·react native
若梦plus3 天前
多端开发之React-Native原理浅析
前端·react native
XiaoSong3 天前
React Native 主题配置终极指南,一篇文章说透
前端·react native·react.js
程序员老刘4 天前
跨平台开发地图:客户端技术选型指南 | 2025年10月
flutter·react native·客户端
Cxiaomu4 天前
React Native 项目中 WebSocket 的完整实现方案
websocket·react native·react.js
少卿5 天前
react-native图标替换
前端·react native
少卿5 天前
React Native Vector Icons 安装指南
前端·react native
前端鳄鱼崽5 天前
【react-native-inspector】全网唯一开源 react-native 点击组件跳转到编辑器
前端·react native·react.js