React Native Top Tab Navigator
(createMaterialTopTabNavigator)

2025年3月17日 | 阅读 3 分钟

material 样式的 createMaterialTopTabNavigator 用于在屏幕顶部创建 tab navigator。它提供了创建和显示多个屏幕路由器的功能。这些屏幕通过点击路由或水平滑动在彼此之间切换。 Tab 屏幕组件在获得焦点时被挂载。

react-navigation 库的 createMaterialTopTabNavigator 函数方便我们实现 top tab navigator。

React Native Top Tab Navigator 示例

让我们创建一个带有自定义状态栏和标题部分的 top tab navigator。在这个例子中，我们将为 "Home"、"Profile" 和 "Settings" 路由器创建三个不同的屏幕。每个路由器屏幕都在单独的文件中创建。

应用程序的目录结构

在您的路由项目中创建一个 src 目录。在 src 目录中，创建 index.js 文件和另外两个目录 lib 和 screens。在 screens 目录中，我们放置三个屏幕文件 index.js (HomeScreen), profile.js (ProfileScreen), 和 settings.js (SettingsScreen)。在 lib 目录中，我们实现 createMaterialTopTabNavigator 以创建 top tab navigator。

topNavigation/index.js

在 topNavigation/index.js 文件中进行一些更改（将 './App' 替换为 './src'）。

import {AppRegistry} from 'react-native';
import App from './src';
import {name as appName} from './app.json';

AppRegistry.registerComponent(appName, () => App);

创建类并从 'react-native-vector-icons/Ionicons' 包中导入 Icon。实现 tabBarIcon 并在其中添加 Icon 标签。

src/screens/index.js

import React, {Component} from 'react';
import {View,Text} from 'react-native';
import Icon from 'react-native-vector-icons/Ionicons';
export default class HomeScreen extends Component{
    render() {
        return(
            <View>
                <Text>This is Home Screen</Text>
            </View>
        )
    }
}
HomeScreen.navigationOptions={
            tabBarIcon:({tintColor, focused})=>(
            <Icon
                name={focused ? 'ios-home' : 'md-home'}
                color={tintColor}
                size={25}
            />
        )
}

src/screens/profile.js

import React, {Component} from 'react';
import {View,Text} from 'react-native';
import Icon from 'react-native-vector-icons/Ionicons';
export default class ProfileScreen extends Component{
    render(){
        return(
            <View>
                <Text>this is profile screen</Text>
            </View>
        )
    }
}
ProfileScreen.navigationOptions={
    tabBarIcon:({tintColor, focused})=>(
        <Icon
            name={focused ? 'ios-person' : 'md-person'}
            color={tintColor}
            size={25}
        />
    )
}

src/screens/settings.js

import React, {Component} from 'react';
import {View,Text} from 'react-native';
import Icon from 'react-native-vector-icons/Ionicons';
export default class SettingScreen extends Component{
    render(){
        return(
            <View>
                <Text>this is setting screen</Text>
            </View>
        )
    }
}
SettingScreen.navigationOptions={
    tabBarIcon:({tintColor, focused})=>(
        <Icon
            name={focused ? 'ios-settings' : 'md-settings'}
            color={tintColor}
            size={25}
        />
    )
}

src/lib/router.js

在 router.js 文件中，导入 'react-navigation' 库的 createMaterialTopTabNavigator 和 createAppContainer 函数。还要导入所有路由器类，并将它们按照我们想要在 tab navigator 顶部显示的顺序放置。

activeTintColor: 将提及的颜色设置为活动路由器。
showIcon: 显示 {true} 和隐藏 {false} 路由器的图标。
showLabel: 显示 {true} 和隐藏 {false} 路由器的标题。默认情况下为 true。

import React from 'react';
import {createMaterialTopTabNavigator,createAppContainer} from 'react-navigation';
import HomeScreen from "../screens/index";
import ProfileScreen from "../screens/profile";
import SettingScreen from "../screens/settings";

const AppNavigator = createMaterialTopTabNavigator(
    {
        Home: HomeScreen,
        Profile: ProfileScreen,
        Settings: SettingScreen,
    },
    {
        tabBarOptions: {
            activeTintColor: 'white',
            showIcon: true,
            showLabel:false,
            style: {
                backgroundColor:'red'
            }
        },
    }
)
export default createAppContainer(AppNavigator);

src/index.js

从 './lib/router' 导入 AppNavigator，并将 AppNavigator 分配给此文件中的 const AppIndex。使用 StatusBar 标签自定义状态栏，并在 tab navigator 的顶部添加标题。

import React, {Component} from 'react';
import {StyleSheet, Text, View,StatusBar} from 'react-native';
import {createAppContainer} from 'react-navigation'; 
import Icon from 'react-native-vector-icons/Ionicons';

import AppNavigator from './lib/router';
const AppIndex = createAppContainer(AppNavigator)

export default class App extends Component{
    render(){
        return(
            <View style={{flex:1}} >
                <StatusBar
                    backgroundColor='red'
                    barStyle='light-content'
                />
                <View style={styles.header}>
                    <Icon name='ios-camera' size={28} color='white'/>
                    <Icon name='ios-menu' size={28} color='white'/>
                </View>
                <AppIndex/>
            </View>
        )
    }
}
const styles = StyleSheet.create({
    wrapper: {
        flex: 1,
    },
    header:{
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'space-between',
        backgroundColor: 'red',
        paddingHorizontal: 18,
        paddingTop: 5,
    }
});

输出

下一个主题React Native Drawer Navigator

← 上一个下一个 →

React Native Top Tab Navigator
(createMaterialTopTabNavigator)

React Native Top Tab Navigator 示例

联系信息

关注我们

教程

面试题

在线编译器

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 Top Tab Navigator(createMaterialTopTabNavigator)

React Native Top Tab Navigator 示例

相关帖子

创建 Material Bottom Tab Navigator

Drawer 导航

在 Tab 导航底部添加图标

Tab 导航

在屏幕之间移动

React Native 导航

配置 Header Bar

在屏幕之间传递值

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器

React Native Top Tab Navigator
(createMaterialTopTabNavigator)