为 React Native 应用程序创建垂直选项卡布局

在开发包含大量资源的多级网站或应用程序时，我们希望用户能从用户界面上的一个位置轻松导航到这些不同的级别。可以使用标签元素来设计用户界面，以实现这一目标。

在本教程中，我们将在 React Native 中从头开始创建垂直选项卡布局，使用 CSS flexbox 来确保布局具有响应性，并在各种设备上看起来相似。然后，我们将讨论水平和垂直标签布局，以及何时最好使用其中一种布局。

为什么在 React Native 应用程序中使用垂直选项卡？

标签式界面包含一组可点击的标签卡或标签页。通常情况下，这些标签是导航式或模块式的。导航标签链接到不同的页面，而模块标签则链接到同一页面的子部分。

标签式界面模式类似于文件柜中的标签式分隔线，在选择文件之前将内容组织成清晰的类别和子类别。就像在这个真实世界的例子中一样，用户可以通过标签页的标签找到想要访问的内容，然后再点击标签页进行查看。

标签是组织内容的好帮手。它们可以让你告诉用户哪些内容属于哪个类别，方便用户找到与其当前目的和目标相一致的内容。下面是 Bootstrap 网站上的一个例子：

在 "表单 "类别下，可以看到几个链接到页面其他部分的子类别。现在，让我们学习如何在 React Native 中创建自己的简单垂直标签菜单。

预览我们的垂直标签布局项目

在垂直选项卡布局中，选项卡垂直排列在左侧。每个选项卡标签对应一个相关内容块，每次只能激活一个选项卡。

下面是最终项目的预览：

在我们进入下一部分之前,你应该已经在 Expo Snack 中设置好了你的启动应用。如果还没有,只需在 Web 浏览器中访问 snack.expo.dev。

导入项目组件

首先删除 App.js 文件中的所有代码。然后，在同一文件中导入以下内容：

import * as React from 'react';
import { StyleSheet, View, Image, TouchableOpacity, Text, Dimension, FlatList, SafeAreaView} from 'react-native';
import {useState} from 'react'

在这里，我们导入了 React 核心库、几个用于构建用户界面的组件，以及用于管理应用程序状态的 useState 钩子。

定义选项卡标签和内容

我们将使用 listTab 来定义标签页标签，并使用 data 来定义每个标签页将链接到的内容。请看下面的代码：

const listTab = [
  {
    status: 'Home'    
  },
  {
    status: 'About'    
  },
  {
    status: 'Contact'    
  },
]

// Linking content
const data = [
  {
    name: "Home content",
    text: "This is my homepage. Here I welcome you to my website and try me best to make a good impression. I tell you about the services I provide and encourage you to venture into my site.",
    status: "Home"
  },
  {
     name: "About content",
    text: "Here I go into details about myself and my business, including the services we provide, how we started and our overall ethos.",
    status: "About"
  },
  {
     name: "Contact content",
    text: "Here we give you information on how to contact us for business discussions and possible collaborations.",
    status: "Contact"
  }
]

每个内容对象都有一个 status 属性，该属性与 listTab 中的状态相匹配。这就是我们将标签页与相应数据连接起来的方式。

为 React Native 标签元素设置功能

在下一个代码块中，我们将定义 App 组件函数：

export default function App() {
  // the following code goes here
}

在 App 中，首先将制表符默认设置为 Home 。确保 Home 的 data 也显示出来：

const [status, setStatus] = useState('Home')
    const [dataList, setDataList] = useState([...data.filter(e => e.status === 'Home')])

现在，您需要一种方法，以便在用户点击标签项后将其激活。我们将使用 setStatusFilter 函数来实现这一目的：

const setStatusFilter = status => {
      if(status !== 'Home') {
        setDataList([...data.filter(e => e.status === status)])
      }else {
        setDataList([...data.filter(e => e.status === 'Home')])
      }

      setStatus(status)
    }

点击标签页时，将执行上述函数。在该函数中，我们只需更新 dataList 以显示与用户点击的标签页相关的内容。

接下来，我们将返回一个包含标签菜单和内容列表的 SafeAreaView 元素。在第一个 <View> 组件中，我们将使用 map() 数组函数循环浏览选项卡项。对于每个项目，我们将呈现一个包含标签页标签的 TouchableOpacity 元素。

我们还将把 btnTabActive 类动态应用到活动选项卡，并调用 setStatusFilter 方法，以便在用户按下元素时更新活动状态：

return (
      <SafeAreaView style={styles.container}>
        <View style={styles.listTab}>
          {
            listTab.map((e) => {
              return (
                <TouchableOpacity 
                  style={[styles.btnTab, status === e.status && styles.btnTabActive]}
                  onPress={() => setStatusFilter(e.status)}
                >
                  <Text style={styles.textTab, status === e.status && styles.textTabActive}>{e.status}</Text>
                </TouchableOpacity>
              )
            })
          }          
        </View>    

        <FlatList
          data={dataList}
          keyExtractor={(e,i) => i.toString()}
          renderItem={renderItem}
        />    
      </SafeAreaView>
    );
}

<View> 组件下面是 <FlatList> 组件。 <FlatList> 通过调用 renderItem 函数，接收与活动选项卡相关的数据并进行渲染。下面是函数体：

const renderItem = ({item, index}) => {
      return (
        <View key={index} style={styles.itemContainer}>                    
          <Text style = {styles.itemName}>{item.name}</Text>                     
          <Text>{item.text}</Text>
        </View>       
      )
 }

在上面的代码中，我们将呈现两个 Text 组件，以显示与活动选项卡相关的标题和文本。

为我们的响应式 React Native 垂直标签布局设计样式

最后，这里是负责为元素设计样式的样式表。请注意，我们使用的是 CSS flexbox 布局系统，以实现响应式垂直标签布局，在不同设备上看起来都差不多：

const styles = StyleSheet.create({
  container: {
    flex: 1,        
    flexDirection: 'row',
    paddingHorizontal: 10,
    justifyContent: 'center'  
  },
  listTab: {
    backgroundColor: '#fff',    
    flexDirection: 'column',
    justifyContent: 'flex-start',
    marginTop: 20,    
    marginLeft: 5,    
    height: 100
  },
  btnTab: {
    width: 50,
    flexDirection: 'row',
    marginBottom: 10,
    paddingHorizontal: 15,
    paddingVertical: 10,
    justifyContent: 'center'
  },
   textTab: {
    fontSize: 16    
  },
  btnTabActive: {
    backgroundColor: 'purple',
    borderRadius: 5
  },
  textTabActive: {
    color: '#fff'
  },
  itemContainer: {    
    justifyContent: 'flex-end',
    paddingVertical: 15,
    marginLeft: 30,
    marginTop: 10
  },
  itemName: {
    fontWeight: 'bold',
    fontSize: 20,
    marginBottom: 5
  },
});

就是这样！现在你就有了一个可用的导航选项卡。点击标签后，其对应的内容将显示在右侧，如下图所示：

我们提到有两种标签布局--垂直和水平。让我们进一步了解它们。

何时使用垂直制表符，何时使用水平制表符

垂直标签通常称为边栏，是放置在页面及其主要内容两侧的链接列表。而横向标签布局则位于页面顶部。你可以将其设置为粘性，这样无论你在页面的哪个位置浏览，它都会出现。

下图显示了显示在屏幕左侧的垂直选项卡元素和显示在屏幕顶部的水平选项卡元素在位置上的不同：

在构建网站或应用程序的用户界面时，首先需要决定网站导航是使用垂直还是水平选项卡布局。那么，什么时候应该使用其中一种而不是另一种呢？

这一切都取决于可用空间。在垂直标签布局中，标签和内容共享相同的水平空间，这意味着内容的空间有限。除非你的目的是在用户浏览你的内容时抓住他们的注意力，否则垂直标签可能不是一个好主意。

总结

希望本教程能帮助您更好地理解垂直和水平选项卡。现在，您应该能够在 React Native 应用程序中使用我们在本篇文章中介绍的技术从头开始创建导航选项卡了。