React Native 顶部选项卡导航器

要创建 Top Tab Navigator，我们需要使用 react-navigation 库中的 createMaterialTopTabNavigator函数。它设计有屏幕顶部的材质主题标签栏。它允许通过点击它们或水平滑动来在各种选项卡之间切换。默认过渡动画可用。

Props：在 React Native 中，创建组件时必须根据属性称为 props 的需要对其进行自定义。

initialRouteName： initialRouteName 是用于路由在导航器初始加载时呈现的名称的道具。
screenOptions： screenOptions 是 React Native 中的道具，用作导航器内屏幕的默认选项。默认选项用于应用所有屏幕导航器。
tabBarPosition：这种类型的道具用于设置标签栏在标签视图中的位置，默认值设置在“顶部”。
lazy： lazy props 用于检查是否会延迟渲染屏幕的布尔值。默认情况下，屏幕显示在视口体验中。
lazyPlaceholder： React Native 中的lazyPlaceholder 属性是一个函数，它返回一个 React 元素，为那些尚未渲染的路由渲染。默认情况下，渲染值为 Null。
removeClippedSubviews： removeClippedSubviewsa 用于改进内存层次结构。它采用布尔值，指示是否从视图层次结构中删除不可见的视图。
keyboardDismissMode：此道具用于获取字符串值，该值指示键盘是否作为对拖动手势的响应而被解除。键盘 Dismiss 模式中的其他值是 auto、on-drag、none。
TimingConfig： timingConfig 属性计时用于计时动画的配置对象，当按下选项卡时发生。 TimingConfig 的其他属性是持续时间和数量。
position：用于监听位置更新的动画值。有时，它会在用户按下选项卡时发生变化。

选项： React Native 中的选项用于配置目的。在导航器中配置画面时执行配置。

title：选项标题一般用作 headerTitle 和 tabBarLabel 的后备。
tabBarIcon： tabBarIcon 选项返回 React。用于在标签栏部分显示的节点是颜色：reacts Native 小部件中的字符串。
标签栏标签： tabBarLabel 在标签的标题字符串中，它显示在 React Native 中屏幕小部件的标签栏部分中。
tabBarAccessibilityLabel：它是一个选项，可以是用户按下选项卡时由屏幕阅读器读取的可访问性标签。
tabBarTestID： tabBarTestID 选项可以是用于在测试中定位此选项卡按钮的 ID。

事件：

tabPress：当用户在标签栏部分按下当前屏幕的标签按钮时，tabPress 事件集关闭。默认情况下，当我们将其滚动到顶部时使用它。
tabLongPress：当用户在标签栏中长时间按下当前屏幕的标签按钮时触发的事件。

帮手：

jumpTo: Helpers jumpTo 用于执行一个函数以在选项卡导航器中导航现有屏幕，它接受名称和参数作为其参数，其中名称是字符串，参数是对象。

现在让我们看看如何创建一个 Top Tab Navigator：

第 1 步：打开终端并通过以下命令安装 expo-cli。
```
npm install -g expo-cli
```
第2步：现在通过以下命令创建一个项目。
```
expo init top-tab-navigator-demo
```
第 3 步：现在进入您的项目文件夹，即 top-tab-navigator-demo
```
cd top-tab-navigator-demo
```

第 4 步：使用以下命令安装所需的软件包：

npm install –save react-navigation react-navigation-tabs react-native-paper react-native-vector-icons

编程需要懂一点英语

项目结构：项目目录应如下所示：

例子：

现在，让我们在 App.js 文件中设置 Top Tab Navigator。在我们的演示应用程序中将有 3 个屏幕：主屏幕、用户屏幕和设置屏幕。因此，我们将有 3 个选项卡在这 3 个屏幕之间导航。

示例：首先，我们将添加我们的 App.js 文件，该文件将包含 Material Bottom Tab Navigator 逻辑。除了有关屏幕和标签的基本信息外，我们还将在设置时添加图标和基本样式。

App.js

import React from "react";
import { Ionicons } from "@expo/vector-icons";
import { createAppContainer } from "react-navigation";
import { createMaterialTopTabNavigator } from "react-navigation-tabs";
  
import ProfileScreen from "./screens/ProfileScreen";
import ImagesScreen from "./screens/ImagesScreen";
import VideoScreen from "./screens/VideosScreen";
  
const TabNavigator = createMaterialTopTabNavigator(
  {
    Profile: {
      screen: ProfileScreen,
      navigationOptions: {
        tabBarLabel: "Profile",
        showLabel: ({ focused }) => {
          console.log(focused);
          return focused ? true : false;
        },
        tabBarIcon: (tabInfo) => (
          
        ),
      },
    },
    Images: {
      screen: ImagesScreen,
      navigationOptions: {
        tabBarLabel: "Images",
        tabBarIcon: (tabInfo) => (
          
        ),
      },
    },
    Video: {
      screen: VideoScreen,
      navigationOptions: {
        tabBarLabel: "Videos",
        tabBarIcon: (tabInfo) => (
          
        ),
      },
    },
  },
  {
    tabBarOptions: {
      showIcon: true,
  
      style: {
        backgroundColor: "#006600",
        marginTop: 28,
      },
    },
  }
);
  
const Navigator = createAppContainer(TabNavigator);
  
export default function App() {
  return (
    
      
    
  );
}

Profile.js

import React from "react";
import { Text, View } from "react-native";
import { Ionicons } from "@expo/vector-icons";
  
const Profile = () => {
  return (
    
      Profile Screen!
      
    
  );
};
  
export default Profile;

Images.js

import React from "react";
import { Text, View } from "react-native";
import { Ionicons } from "@expo/vector-icons";
  
const Images = () => {
  return (
    
      
        Images Screen!
      
      
    
  );
};
  
export default Images;

Videos.js

import React from "react";
import { Text, View } from "react-native";
import { Ionicons } from "@expo/vector-icons";
  
const Videos = () => {
  return (
    
      
         Videos Screen!
      
      
    
  );
};
  
export default Videos;

Profile.js

import React from "react";
import { Text, View } from "react-native";
import { Ionicons } from "@expo/vector-icons";
  
const Profile = () => {
  return (
    
      Profile Screen!
      
    
  );
};
  
export default Profile;

图片.js

import React from "react";
import { Text, View } from "react-native";
import { Ionicons } from "@expo/vector-icons";
  
const Images = () => {
  return (
    
      
        Images Screen!
      
      
    
  );
};
  
export default Images;

视频.js

import React from "react";
import { Text, View } from "react-native";
import { Ionicons } from "@expo/vector-icons";
  
const Videos = () => {
  return (
    
      
         Videos Screen!
      
      
    
  );
};
  
export default Videos;

使用以下命令启动服务器。

expo start

输出：

参考： https://reactnavigation.org/docs/material-top-tab-navigator/