React Native 选项卡导航

17 Mar 2025 | 阅读 2 分钟

React Native 选项卡导航是移动应用程序中最常见的导航方式。选项卡导航位于屏幕底部或顶部（标题下方），有时也作为标题。它用于在不同的路由屏幕之间切换。

要创建基于选项卡的导航，请在 react-navigation 库的根函数中导入 createBottomTabNavigator 和 createAppContainer。

底部选项卡导航器配置

BottomTabNavigator 有多种可配置的属性。其中一些是

属性	描述
initialRouteName	它定义了应用程序首次加载时的初始选项卡路由。
顺序	它是一个路由屏幕的数组，用于设置选项卡的顺序。
paths	它提供了路由屏幕到路径配置的映射，覆盖了 routeConfigs 中设置的路径。
lazy	将其设置为 {true} 会使选项卡在首次激活时才呈现。如果设置为 false，则所有选项卡都会立即呈现。其默认值为 true。
tabBarComponent	它覆盖了用作选项卡栏的组件。它是可选的。
tabBarOptions	它是一个包含以下属性的对象：activeTintColor、activeBackgroundColor、inactiveTintColor、inactiveBackgroundColor、showLabel、showIcon、style、labelStyle、tabStyle、allowFontScaling。

基于选项卡的导航示例

创建两个名为 HomeScreen 和 ProfileScreen 的类。在 createBottomTabNavigator 函数中分别注册这些类，对应于 Home 和 Profile 选项卡。

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { createBottomTabNavigator, createAppContainer } from 'react-navigation';

class HomeScreen extends React.Component {
    render() {
        return (
            <View style={styles.container}>
                <Text>Home Screen</Text>
            </View>
        );
    }
}
class ProfileScreen extends React.Component {
    render() {
        return (
            <View style={styles.container}>
                <Text>Profile Screen</Text>
            </View>
        );
    }
}

const TabNavigator = createBottomTabNavigator({
    Home: HomeScreen,
    Profile: ProfileScreen,
});
const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center'
    },
});

export default createAppContainer(TabNavigator);

输出

如果我们设置 initialRouteName: "Profile"，那么它将加载 "ProfileScreen" 作为初始路由选项卡。

const TabNavigator = createBottomTabNavigator({
        Home: HomeScreen,
        Profile: ProfileScreen,
    },
    {
        initialRouteName: "Profile"
    }
);

下一个主题在底部选项卡导航栏中添加图标

React Native 选项卡导航

底部选项卡导航器配置

基于选项卡的导航示例

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

React Native 教程

指南

API

导航

存储

其他

React Native 选项卡导航

底部选项卡导航器配置

基于选项卡的导航示例

相关帖子

在 Tab 导航底部添加图标

在屏幕之间传递值

创建 Material Top Tab Navigator

React Native 导航

在屏幕之间移动

配置 Header Bar

Drawer 导航

创建 Material Bottom Tab Navigator

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器