React Native 底部标签 - JavaScript 教程

摘要：在本教程中，您将学习如何使用 React Navigation 库在 React Native 应用程序中创建底部标签。

React Native 底部标签组件简介

要在应用程序屏幕底部创建标签栏，可以使用 React Navigation 库中的底部标签。

底部标签允许您在不同的屏幕之间导航。每个标签代表一个路由。您可以通过点击标签在这些路由之间导航。

底部标签由以下部分组成：

标签栏：显示在屏幕底部，带有导航标签。
图标和标签：每个标签都可以有一个图标和标签，代表一个路由。

您可以自定义底部标签，例如：

修改样式。
添加动画。
更改行为。

此外，您可以将底部标签与其他导航器（例如堆栈导航器）一起使用，以创建灵活的导航选项。

使用 React Navigation 创建 React Native 应用程序

在本节中，您将探索如何在应用程序中设置和使用底部标签导航器。

要求

在开始之前，请确保您拥有以下内容：

react-native >= 0.63.0
expo >= 41（如果您使用 Expo Go）

设置新项目

首先，打开您的终端并执行以下命令以创建一个新的 React Native 应用程序

npx create-expo-app tab --template blankCode language: JavaScript (javascript)

此命令将创建 tab 目录并初始化 React Native 应用程序结构。

其次，导航到项目目录 tab

cd tabCode language: JavaScript (javascript)

第三，通过执行以下命令安装 React Navigation 库及其依赖项

npm install @react-navigation/native @react-navigation/bottom-tabs react-native-screens react-native-safe-area-contextCode language: JavaScript (javascript)

创建底部标签导航

步骤 1. 在项目目录中创建一个名为 screens 的新目录，以存储屏幕。

步骤 2. 在 screens 目录中创建一个 Home 屏幕

import { SafeAreaView, StyleSheet, Text, View } from 'react-native';

const Home = () => {
    return (
        <SafeAreaView style={styles.container}>
            <View style={styles.screen}>
                <Text>Home Screen</Text>
            </View>
        </SafeAreaView>
    );
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
    },
    screen: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
    }
});

export default Home;Code language: JavaScript (javascript)

步骤 3. 在 screens 目录中创建一个 Profile 屏幕

import { SafeAreaView, StyleSheet, Text, View } from 'react-native';

const Profile = () => {
    return (
        <SafeAreaView style={styles.container}>
            <View style={styles.screen}>
                <Text>Profile Screen</Text>
            </View>
        </SafeAreaView>
    );
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
    },
    screen: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
    }
});

export default Profile;Code language: JavaScript (javascript)

步骤 4. 在 screens 目录中创建一个 index.js，导入 Home 和 Profile 屏幕，并立即导出它们

import Home from './Home.jsx';
import Profile from './Profile.jsx';

export { Home, Profile }Code language: JavaScript (javascript)

通过这样做，您可以使用单个导入从 screens 目录导入所有屏幕到 App.js

import { Home, Profile} from './screens/index';Code language: JavaScript (javascript)

步骤 5. 将 Home 和 Profile 屏幕导入 App.js 文件，并将 Home 屏幕作为主组件放置

import { Home, Profile } from './screens/index';

export default function App() {
  return (
    <Home />
  );
}Code language: JavaScript (javascript)

步骤 6. 打开终端并运行应用程序

npm startCode language: JavaScript (javascript)

步骤 7. 创建一个名为 components 的新目录，以存储可重用的 React 组件。在 components 目录中，创建一个新的 TabIcon 组件。

import MaterialCommunityIcons from '@expo/vector-icons/MaterialCommunityIcons';

const TabIcon = ({ focused, name, size, color }) => {
  return <MaterialCommunityIcons name={focused ? name : `${name}-outline`} size={size} color={color} />
};


export const TabIcons = {
  home: 'home',
  account: 'account',
  // more MaterialCommunityIcons with the outline versions here
  // ...
}


export default TabIcon;Code language: JavaScript (javascript)

TabIcon 在标签处于焦点状态时显示一个图标，而在标签未处于焦点状态时显示其轮廓版本。此外，导出 TabIcon 对象，其值为来自 MaterialCommunityIcons 库的图标名称。

步骤 8. 修改 App.js 以创建底部标签导航器

import { NavigationContainer } from '@react-navigation/native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { Home, Profile } from './screens/index';
import TabIcon, { TabIcons } from './components/TabIcon';

const BottomTab = createBottomTabNavigator();

const App = () => {
  return (
    <NavigationContainer>
      <BottomTab.Navigator>
        <BottomTab.Screen
          name="Home"
          component={Home}
          options={{ tabBarIcon: ({ focused, color, size }) => <TabIcon focused={focused} name={TabIcons.home} size={size} color={color} /> }} />

        <BottomTab.Screen
          name="Settings"
          component={Profile}
          options={{ tabBarIcon: ({ focused, color, size }) => <TabIcon focused={focused} name={TabIcons.account} size={size} color={color} /> }}
        />
      </BottomTab.Navigator>
    </NavigationContainer>
  );
}

export default App;Code language: JavaScript (javascript)

工作原理。

首先，从 React Navigation 库导入 NavigationContainer 组件和 createBottomTabNavigator 函数

import { NavigationContainer } from '@react-navigation/native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';Code language: JavaScript (javascript)

其次，导入 Home 和 Profile 屏幕以及 TabIcon 组件

import { Home, Profile } from './screens/index';
import TabIcon, { TabIcons } from './components/TabIcon';Code language: JavaScript (javascript)

第三，通过调用 createBottomTabNavigator 函数创建一个新的底部标签导航器对象

const BottomTab = createBottomTabNavigator();Code language: JavaScript (javascript)

底部标签导航器有两个属性，分别是 React Native 组件

导航器
屏幕

最后，使用 NavigationContainer 组件作为应用程序的根组件

<NavigationContainer>
  <BottomTab.Navigator>

    <BottomTab.Screen
      name="Home"
      component={Home}
      options={{ tabBarIcon: ({ focused, color, size }) => <TabIcon focused={focused} name={TabIcons.home} size={size} color={color} /> }} />

    <BottomTab.Screen
      name="Settings"
      component={Profile}
      options={{ tabBarIcon: ({ focused, color, size }) => <TabIcon focused={focused} name={TabIcons.account} size={size} color={color} /> }}
    />
  </BottomTab.Navigator>
</NavigationContainer>Code language: JavaScript (javascript)

Screen 组件包含 name、component 和 options 属性

name 属性指定用于导航的路由名称。
component 属性定义要渲染的组件。
options 属性确定标签的选项。它将 tabBarIcon 设置为自定义 TabIcon 组件。

底部标签导航器有两个路由 Home 和 Profile。当您按下标签时，相应的屏幕将显示

总结

使用 React Navigation 库中的底部标签导航器在您的应用程序上创建底部标签。

本教程是否有帮助？