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

官方文档

官方文档链接

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

具体内容

FlatList & SectionList

1. React Native 提供了几个适用于展示长列表数据的组件，一般而言我们会选用FlatList或是SectionList。

2. FlatList组件用于显示一个垂直的滚动列表，其中的元素之间结构近似而仅数据不同。

   1. FlatList更适于长列表数据，且元素个数可以增删。和ScrollView不同的是，FlatList并不立即渲染所有元素，而是优先渲染屏幕上可见的元素。
   2. FlatList组件必须的两个属性是data和renderItem。data是列表的数据源，而renderItem则从数据源中逐个解析数据，然后返回一个设定好格式的组件来渲染。
   3. 下面的例子创建了一个简单的FlatList，并预设了一些模拟数据。首先是初始化FlatList所需的data，其中的每一项（行）数据之后都在renderItem中被渲染成了Text组件，最后构成整个FlatList。

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

具体操作

1）移动文件

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

2）修改_layout.tsx文件

alt+z 可开启自动换行

1. 删除导入语句

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

   import 'react-native-reanimated';

   import { StatusBar } from 'expo-status-bar';(如果有的话)

2. 添加导入语句

   import { Appearance } from 'react-native';

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

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

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

4. 对报错语句进行修改

   // 直接删除掉相应的语句就行，下面是删除之后的代码：
   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