react native学习【6.1】——列表视图

🕗 发布于 2025-01-18 00:27 react native 学习 android

react native学习【6.1】——列表视图

官方文档

官方文档链接

https://reactnative.cn/docs/using-a-listview

具体内容

FlatList & SectionList

React Native 提供了几个适用于展示长列表数据的组件，一般而言我们会选用FlatList或是SectionList。
FlatList组件用于显示一个垂直的滚动列表，其中的元素之间结构近似而仅数据不同。
1. FlatList更适于长列表数据，且元素个数可以增删。和ScrollView不同的是，FlatList并不立即渲染所有元素，而是优先渲染屏幕上可见的元素。
2. FlatList组件必须的两个属性是data和renderItem。data是列表的数据源，而renderItem则从数据源中逐个解析数据，然后返回一个设定好格式的组件来渲染。
3. 下面的例子创建了一个简单的FlatList，并预设了一些模拟数据。首先是初始化FlatList所需的data，其中的每一项（行）数据之后都在renderItem中被渲染成了Text组件，最后构成整个FlatList。

在这里插入图片描述

如果要渲染的是一组需要分组的数据，也许还带有分组标签的，那么SectionList将是个不错的选择。

在这里插入图片描述

具体操作

1）移动文件

将(tabs)中的index.jsx contact.jsx移动到app文件夹下面；
删除（tabs）和（coffee）文件夹。

2）修改_layout.tsx文件

alt+z 可开启自动换行

删除导入语句

import { DarkTheme, DefaultTheme, ThemeProvider } from '@react-navigation/native';

import 'react-native-reanimated';

import { StatusBar } from 'expo-status-bar';(如果有的话)
添加导入语句

import { Appearance } from 'react-native';

import { Colors } from '@/constants/Colors';

修改并添加具体的代码语句

const colorScheme = Appearance.getColorScheme(); // 调用Appearance 来提供配色方案 'light' | 'dark'
const theme = colorScheme === 'dark' ? Colors.dark : Colors.light; // 根据当前的配色方案选择对应的主题颜色

对报错语句进行修改

// 直接删除掉相应的语句就行，下面是删除之后的代码：
return (
      <Stack>
        <Stack.Screen name="(tabs)" options={{ headerShown: false }} />
        {/* <Stack.Screen name="(coffee)" options={{ headerShown: false }} /> */}
        {/* 为每一个文件添加一个堆栈 */}
        {/*   <Stack.Screen name="index" options={{title: "Home", headerShown:false}} />
        <Stack.Screen name="contact" options={{title: "Contact Us"}} /> */}
        <Stack.Screen name="+not-found" />
      </Stack>     
  );

之后，对Stack添加选项，设置标题headerStyle背景颜色 backgroundColor的时候需要对Colors文件添加代码hearderBackground。

在这里插入图片描述

return (
      <Stack screenOptions={{headerStyle: {backgroundColor: theme.headerBackground},
      headerTintColor: theme.text, headerShadowVisible: false,}}>
        <Stack.Screen name="index" options={{ headerShown: false, title: 'Home'}} />
        <Stack.Screen name="menu" options={{ headerShown: true, title: 'Meanu', headerTitle: 'Coffee Shop  Menu' }} />
        <Stack.Screen name="contact" options={{ headerShown: true, title: 'Contact', headerTitle: 'Contact Us' }} />
        <Stack.Screen name="+not-found" options={{headerShown: false}}/>
      </Stack> 
  );

需要注意的是，还没有创建menu相关的文件，可能会报错。

最终的_layout.tsx文件的代码

import { useFonts } from 'expo-font';
import { Stack } from 'expo-router';
import * as SplashScreen from 'expo-splash-screen';
import { useEffect } from 'react';
import { Appearance } from 'react-native';
import { Colors } from '@/constants/Colors';


// Prevent the splash screen from auto-hiding before asset loading is complete.
SplashScreen.preventAutoHideAsync();

export default function RootLayout() {
  const colorScheme = Appearance.getColorScheme(); // 调用Appearance 来提供配色方案 'light' | 'dark'
  const theme = colorScheme === 'dark' ? Colors.dark : Colors.light; // 根据当前的配色方案选择对应的主题颜色
  const [loaded] = useFonts({
    SpaceMono: require('../assets/fonts/SpaceMono-Regular.ttf'),
  });

  useEffect(() => {
    if (loaded) {
      SplashScreen.hideAsync();
    }
  }, [loaded]);

  if (!loaded) {
    return null;
  }

  return (
      <Stack screenOptions={{headerStyle: {backgroundColor: theme.headerBackground},
      headerTintColor: theme.text, headerShadowVisible: false,}}>
        <Stack.Screen name="index" options={{ headerShown: false, title: 'Home'}} />
        <Stack.Screen name="menu" options={{ headerShown: true, title: 'Meanu', headerTitle: 'Coffee Shop  Menu' }} />
        <Stack.Screen name="contact" options={{ headerShown: true, title: 'Contact', headerTitle: 'Contact Us' }} />
        <Stack.Screen name="+not-found" options={{headerShown: false}}/>
      </Stack> 
  );
}

3）添加并编写menu.jsx文件

在app文件夹下面添加menu.jsx文件（注意，此时的menu.jsx是和index.jsx文件是同等级的）

提到SafeAreaViewhttps://reactnative.cn/docs/safeareaview

import { StyleSheet, Appearance, Platform, SafeAreaView, ScrollView, FlatList, View, Text, Image } from "react-native";
import { Colors } from "@/constants/Colors";

export default function MenuScreen(){
    const colorScheme = Appearance.getColorScheme();
    const theme = colorScheme === "dark"? Colors.dark : Colors.light;
    const styles = createStyles(theme, colorScheme);
    // SafeAreaView在移动设备上使用，ScrollView在web上使用
    const Container = Platform.OS === 'web' ? ScrollView : SafeAreaView;
    
    // 菜单屏幕功能的返回
    return (
        // 这里的Container是父容器
        <Container>  
            {/* data需要具体的数值，所以在constants文件夹下面创建文件MenuItems.js */}
            <FlatList
                data ={[]}
                renderItem={({item}) => ()}
                >

            </FlatList>
        </Container>
    )
}

function createStyles(theme, colorScheme) {
    return StyleSheet.create({
    });
}

上述内容存在不完善，提示一个错误。后面会完善

4）编写MenuItems.js

在constants文件夹下面创建文件MenuItems.js 。

在这里插入图片描述

export const MENU_ITEMS = [
    {
        "id":1,
        "title":"Espresso",
        "description": "Strong, concentrated coffee.",
    },
    {
        "id":2,
        "title":"Latte",
        "description": "Rich, smooth milk with a smooth texture.",
    },
    {
        "id":3,
        "title":"Cappuccino",
        "description": "A smooth, rich, and creamy coffee with a smooth texture.",
    },
    {
        "id":4,
        "title":"Americano",
        "description": "A strong, thick coffee with a smooth texture.",
    },
    {
        "id":5,
        "title":"Mocha",
        "description": "A smooth, rich, and creamy coffee with a smooth texture.",
    },
    {
        "id":6,
        "title":"Macchiato",
        "description": "A smooth, rich, and creamy coffee with a smooth texture.",
    },
    {
        "id":7,
        "title":"affogato",
        "description": "A smooth, rich, and creamy coffee with a smooth texture.",
    },
    {
        "id":8,
        "title":"coldblew",
        "description": "Rich, smooth milk with a smooth texture.",
    },
    {
        "id":9,
        "title":"cortado",
        "description": "A strong, thick coffee with a smooth texture.",
    },
    {
        "id":10,
        "title":"flatwhite",
        "description": "A smooth, rich, and creamy coffee with a smooth texture.",
    }
]
// 上述内容不一定准确，只是一个示例

5）创建menu图像文件夹

在images目录下面，创建menu文件夹，并将已有的coffee图像移动到该文件夹当中。

图像来源: https://github.com/gitdagray/react-native-course/tree/lesson-4/MyApp/assets/images/menu
在这里插入图片描述

6）创建调用图像的文件MenuImages.js

在constants文件夹下面创建文件MenuImages.js

创建数组存储这些咖啡。

import espresso from "@/assets/images/menu/espresso.png"
import americano from "@/assets/images/menu/americano.png"
import latte from "@/assets/images/menu/latte.png"
import cappuccino from "@/assets/images/menu/cappuccino.png"
import macchiato from "@/assets/images/menu/macchiato.png"
import mocha from "@/assets/images/menu/mocha.png"
import flatwhite from "@/assets/images/menu/flatwhite.png"
import cortado from "@/assets/images/menu/cortado.png"
import coldbrew from "@/assets/images/menu/coldbrew.png"
import affogato from "@/assets/images/menu/affogato.png"

export default [
    espresso,
    americano,
    latte,
    cappuccino,
    macchiato,
    mocha,
    flatwhite,
    cortado,
    coldbrew,
    affogato
]

欢迎交流~
一切顺利！

原文地址：https://blog.csdn.net/qq_48285331/article/details/145156693

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！

上一篇：Spring 6 第1章——概述
下一篇：国内汽车法规政策标准解读：GB/T 44464-2024《汽车数据通用要求》

PCL 点到面的ICP算法实现点云配准（C++详细过程版）
[1]LowKL.Linearleast-squaresoptimizationforpoint-to-planeicpsurfaceregistration[J].ChapelHill,Univer
阅读更多2025-01-18
MySQL（高级特性篇） 07 章——InnoDB数据存储结构
页a、页b、页c...页n这些页可以不再物理结构上相连，只要通过双向链表相关联即可。每个数据页中的记录会按照主键值从小到大的顺序组成一个单向链表，每个数据页都会为存储在它里边的记录生成一个页目录，在通
阅读更多2025-01-18
Linux中的nc命令是网络工具中的一种，用于进行网络连接和数据传输。下面是nc命令的使用方法和实例：
nc -l 8080 < file.txt ``` 这会将file.txt文件发送到本地的8080端口。接收文件： ``` nc 192.168.0.1 8080 > file.txt。这
阅读更多2025-01-18
linux运行程序和批处理详解
在 Linux 中，运行程序和执行批处理任务是非常常见的操作。Linux 提供了多种方法来执行程序，包括通过命令行直接运行、使用脚本自动化任务、以及通过批处理机制执行多个命令。本文对关于如何运行程序和
阅读更多2025-01-18
toddler_regs
所以flag{Xp0int_1s_n1c3_but_Xp0intJNU_is_we1rd}
阅读更多2025-01-18
2025年编程语言热度分析：Python领跑，Go与Rust崛起
Python继续占据第一的位置，增长显著，主要受益于 AI 和数据科学的蓬勃发展。C++和Java紧随其后，保持着在高性能计算和企业级开发中的重要地位。Go和Rust等现代语言正在快速增长，特别是在云
阅读更多2025-01-18
skywalking的使用
其实就可以回答skywalking，skywalking是一个特别适用于微服务架构、云原生环境以及基于容器（如Docker、Kubernetes）的应用部署。
阅读更多2025-01-18
2013年IMO几何预选题第4题
2013IMOG4
阅读更多2025-01-18
《汽车与驾驶维修》是什么级别的期刊？是正规期刊吗？能评职称吗？
（4）论文所涉及的课题如为国家或部、省市级以上基金或攻关项目，必须注明具体的基金项目名称及其项目编号，并提供官方链接或其他相关证明。杂志以服务广大车主、准车主及汽车爱好车为宗旨，凭借专业背景、权威将新
阅读更多2025-01-18
R语言的文件操作
R语言提供了强大的文件操作功能，使得用户能够方便地进行数据的读取、写入和处理。本文介绍了R语言中文件操作的基本概念和常用方法，希望能帮助读者更好地理解和应用R语言进行数据分析。随着数据分析需求的不断增
阅读更多2025-01-18

react native学习【6.1】——列表视图

react native学习【6.1】——列表视图

官方文档

官方文档链接

具体内容

FlatList & SectionList

具体操作

1）移动文件

2）修改_layout.tsx文件

删除导入语句

添加导入语句

修改并添加具体的代码语句

对报错语句进行修改

最终的_layout.tsx文件的代码

3）添加并编写menu.jsx文件

4）编写MenuItems.js

5）创建menu图像文件夹

6）创建调用图像的文件MenuImages.js

相关文章