React Native实现底部Tab切换—TabNavigator

最新推荐文章于 2025-07-03 21:32:10 发布

原创

最新推荐文章于 2025-07-03 21:32:10 发布 · 3.9k 阅读

1 ·

CC 4.0 BY-SA版权

本文介绍了如何使用React-native-tab-navigator库实现移动端底部Tab切换的功能。详细讲述了集成步骤、核心代码展示，并列举了TabNavigator配置参数，包括title、tabBarVisible、tabBarIcon等，以及TabNavigatorConfig的相关配置如tabBarComponent、animationEnabled和tabBarOptions等，帮助开发者创建自定义的底部Tab导航。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

功能：

使用React-native-tab-navigator（https://github.com/exponentjs/react-native-tab-navigator）实现底部选项卡切换

实现效果：

在这里插入图片描述

实现过程：

1、项目集成react-native-tab-navigator

在项目根目录下，运行：npm install react-native-tab-navigator –-save

2、核心代码：

App.js代码

import React, {Component} from 'react';
import {Platform, StyleSheet, Text, View,StatusBar,Image} from 'react-native';
import {StackNavigator, TabNavigator, TabBarBottom} from 'react-navigation'

import color from './widget/color'
import TabBarItem from './widget/TabBarItem'

import HomeScene from './scene/Home/HomeScene'
import MineScene from './scene/Mine/MineScene'

const lightContentScenes = ['Home', 'Mine']

function getCurrentRouteName(navigationState: any) {
    if (!navigationState) {
        return null
    }
    const route = navigationState.routes[navigationState.index]
    // dive into nested navigators
    if (route.routes) {
        return getCurrentRouteName(route)