ReactNative——导航器createBottomTabNavigator(底部标签导航器篇)

上一篇有讲到堆栈式导航器的写法，点这里->堆栈式导航器

标签导航器官网链接

先安装依赖包

yarn add @react-navigation/bottom-tabs

接着在src/navigator文件夹下新建BottomTabs.tsx文件,写法跟堆栈式导航器类似的~

import React from 'react';
import { NavigationContainer } from '@/react-navigation/native';
import { createBottomTabNavigator } from '@/react-navigation/bottom-tabs'
import Home from '@/pages/Home';
import Listen from '@/pages/Listen';
import Found from '@/pages/Found';
import Account from '@/pages/Account';

export type BottomTabParamList = {
    Home:undefined;
    Listen:undefined;
    Found:undefined;
    Account:undefined;
}

const Tab = createBottomTabNavigator<BottomTabParamList>()

class BottomTabs extends React.Component {
    render() {
        return (
             <NavigationContainer>
                <Tab.Navigator>
                    <Tab.Screen name="Home" component={Home}/>
                    <Tab.Screen name="Listen" component={Listen}/>
                    <Tab.Screen name="Found" component={Found}/>
                    <Tab.Screen name="Account" component={Account}/>
                </Tab.Navigator>
            </NavigationContainer>
        )
    }    
}

export default BottomTabs;

然后在src/index.tsx使用该导航器

import Navigator from '@/navigator/BottomTabs';
 
export default Navigator;

如何更改为自定义的标签名字？

在options属性里修改

<NavigationContainer>
    <Tab.Navigator>
        <Tab.Screen 
            name="Home" 
            component={Home}
            options={{tabBarLabel:'首页'}}
        />
        <Tab.Screen
            name="Listen" 
            component={Listen} 
            options={{tabBarLabel:'我听'}}
        />
        <Tab.Screen 
            name="Found" 
            component={Found} 
            options={{tabBarLabel:'发现'}}
        />
        <Tab.Screen 
            name="Account" 
            component={Account} 
            options={{tabBarLabel:'我的'}}
        />
    </Tab.Navigator>
</NavigationContainer>

【改动后效果如下图】

如何更改标签选中的颜色？

使用tabBarOptions属性

<NavigationContainer>
    <Tab.Navigator 
        tabBarOptions={{
            activeTintColor:'#f86442',
        }}>
        <Tab.Screen 
            name="Home" 
            component={Home}
            options={{tabBarLabel:'首页'}}
        />
        <Tab.Screen
            name="Listen" 
            component={Listen} 
            options={{tabBarLabel:'我听'}}
        />
        <Tab.Screen 
            name="Found" 
            component={Found} 
            options={{tabBarLabel:'发现'}}
        />
        <Tab.Screen 
            name="Account" 
            component={Account} 
            options={{tabBarLabel:'我的'}}
        />
    </Tab.Navigator>
</NavigationContainer>

如果要实现在首页里点击某处跳转到详情页要怎么实现呢？这涉及到导肮嵌套

将堆栈式导航器嵌套到标签导航器

在首页里嵌套堆栈式导航器BottomTabs.tsx

import React from 'react';
import { NavigationContainer } from '@/react-navigation/native';
import { createBottomTabNavigator } from '@/react-navigation/bottom-tabs'
import Test from './index'; // 注意这里引入的是堆栈式导航器组件
import Listen from '@/pages/Listen';
import Found from '@/pages/Found';
import Account from '@/pages/Account';

export type BottomTabParamList = {
    Test:undefined; // 这里改一下
    Listen:undefined;
    Found:undefined;
    Account:undefined;
}

const Tab = createBottomTabNavigator<BottomTabParamList>()

class BottomTabs extends React.Component {
    render() {
        return (
             <NavigationContainer>
                <Tab.Navigator>
                    <Tab.Screen name="Test" component={Test}/>
                    <Tab.Screen name="Listen" component={Listen}/>
                    <Tab.Screen name="Found" component={Found}/>
                    <Tab.Screen name="Account" component={Account}/>
                </Tab.Navigator>
            </NavigationContainer>
        )
    }    
}

export default BottomTabs;

修改堆栈式导航器index.tsx（去掉NavigationContainer）

import React from 'react';
import {NavigationContainer} from '@react-navigation/native'
import {createStackNavigator} from '@react-navigation/stack'
import Home from '@/pages/Home';
import Detail from '@/pages/Detail';
import {
  createStackNavigator,
  StackNavigationProp,
} from '@react-navigation/stack'; // 自动引入
 
type RootStackPareamList = {
    Home: undefined; // 这里改一下
    Detail:undefined;
}
 
export type RootStackNavigation = StackNavigationProp<RootStackPareamList>
 
 
const Stack = createStackNavigator<RootStackPareamList>();
/*{
    Navigator, // 导航器
    Screen // 路由，也就是页面
}
*/
 
class Navigator extends React.Component {
    render(){
        return (
         <Stack.Navigator
            headerMode="float"
            screanOptions={{
                headerTitleAlign:'center',
            }}>
            <Stack.Screen 
                options={{ headerTitleAlign:'left, headerTitle:'首页'}} 
                name="Home" 
                component={Home}
            />
            <Stack.Screen name="Detail" component={Detail}/>
        </Stack.Navigator>);
    }
}
 
export default Navigator;

此时当在首页点击跳转详情页的时候，就能实现跳转了，下面的标签栏是不会消失的，如果想在跳转的时候底部导航器消失要怎么做呢？

将标签导航器嵌套到堆栈式导航器

修改标签导航器的代码问以下，去掉NavigationContainer

import React from 'react';
import { NavigationContainer } from '@/react-navigation/native';
import { createBottomTabNavigator } from '@/react-navigation/bottom-tabs'
import Home from '@/pages/Home'; // 注意这里改回为Home组件
import Listen from '@/pages/Listen';
import Found from '@/pages/Found';
import Account from '@/pages/Account';

export type BottomTabParamList = {
    Home:undefined;
    Listen:undefined;
    Found:undefined;
    Account:undefined;
}

const Tab = createBottomTabNavigator<BottomTabParamList>()

class BottomTabs extends React.Component {
    render() {
        return (
            <Tab.Navigator>
                <Tab.Screen name="Home" component={Home}/>
                <Tab.Screen name="Listen" component={Listen}/>
                <Tab.Screen name="Found" component={Found}/>
                <Tab.Screen name="Account" component={Account}/>
            </Tab.Navigator>
        )
    }    
}

export default BottomTabs;

将堆栈式导航器组件index.tsx还原到上一篇中的写法（即不要去掉NavigationContainer）

然后引入标签导航器

import React from 'react';
import {NavigationContainer} from '@react-navigation/native'
import {createStackNavigator} from '@react-navigation/stack'
// import Home from '@/pages/Home'; // 注意这里改成引入标签导航器了
import BottomTabs from './BottomTabs'; // 引入标签导航器
import Detail from '@/pages/Detail';
import {
  createStackNavigator,
  StackNavigationProp,
} from '@react-navigation/stack'; // 自动引入
 
type RootStackPareamList = {
    BottomTabs: undefined; // 这里改一下
    Detail:undefined;
}
 
export type RootStackNavigation = StackNavigationProp<RootStackPareamList>
 
const Stack = createStackNavigator<RootStackPareamList>();
/*{
    Navigator, // 导航器
    Screen // 路由，也就是页面
}
*/
 
class Navigator extends React.Component {
    render(){
        return (
            <NavigationContainer>
                <Stack.Navigator
                headerMode="float"
                screanOptions={{
                    headerTitleAlign:'center',
                }}>
                <Stack.Screen 
                    options={{ headerTitleAlign:'left, 
                    headerTitle:'首页'}} 
                    name="BottomTabs" 
                    component={BottomTabs}
                />
                <Stack.Screen name="Detail" component={Detail}/>
            </Stack.Navigator>);
    }
}
 
export default Navigator;

然后在src/index.tsx中修改为使用堆栈式导航器（因为是往堆栈式里嵌套了标签导航器，所以本质上其实是使用了堆栈式导航器为主体）

import Navigator from '@/navigator/index';
 
export default Navigator;

现在为止，就能实现跳转到详情页的时候，底部标签导航器消失了，

但是会有一个问题，当点击底部导航栏跳转的时候，标题总是显示首页，如下图所示

如何动态修改标题栏？

在BottomTabs.tsx中增加以下代码

import React from 'react';
import { NavigationContainer } from '@/react-navigation/native';
import { createBottomTabNavigator } from '@/react-navigation/bottom-tabs'
import Home from '@/pages/Home';
import Listen from '@/pages/Listen';
import Found from '@/pages/Found';
import Account from '@/pages/Account';

export type BottomTabParamList = {
    Home:undefined;
    Listen:undefined;
    Found:undefined;
    Account:undefined;
}

const Tab = createBottomTabNavigator<BottomTabParamList>() 

// 这里
type Route = RouteProp<RootStackParamList,'BottomTabs'>&
    state?:TabNavigationState;
}

// 这里
interface IProps {     
    navigation: RootStackNavigation;
    route:RouteProp<RootStackParamList,'BottomTabs'>;
}

// 增加一个获取标题名称的方法
function getHeaderTitle(route: Route) {
    const roureName = route.state
        ? route.state.routes[route.state.index].name
        : route.params?.screen || 'Home';
        switch(routeName) {
            case 'Home':
                return '首页';
            case 'Listen':
                return '我听';
            case 'Found':
                return '发现';
            case 'Account':
                return '账户';
            default:
                return '首页'
        }
}

class BottomTabs extends React.Component<IProps>{
    // props发生变化就会执行生命周期
    componentDidUpdate() {
        const {navigation,route} = this.props;
        navigation.setOptions({
            headerTitle:getHeaderTitle(route),
        });
    }

    render() {
        return (
            <Tab.Navigator>
                <Tab.Screen name="Home" component={Home}/>
                <Tab.Screen name="Listen" component={Listen}/>
                <Tab.Screen name="Found" component={Found}/>
                <Tab.Screen name="Account" component={Account}/>
            </Tab.Navigator>
        )
    }    
}

export default BottomTabs;

在index.tsx(堆栈式导航器)中增加以下代码

import React from 'react';
import {NavigationContainer} from '@react-navigation/native'
import {createStackNavigator} from '@react-navigation/stack'
import BottomTabs from './BottomTabs';
import Detail from '@/pages/Detail';
import {
  createStackNavigator,
  StackNavigationProp,
} from '@react-navigation/stack'; // 自动引入
 
type RootStackPareamList = {
    BottomTabs: { // 这里改一下
        screen?: string;    
    }; 
    Detail:undefined;
}
 
export type RootStackNavigation = StackNavigationProp<RootStackPareamList>
 
const Stack = createStackNavigator<RootStackPareamList>();

class Navigator extends React.Component {
    render(){
        return (
            <NavigationContainer>
                <Stack.Navigator
                headerMode="float"
                screanOptions={{
                    headerTitleAlign:'center',
                }}>
                <Stack.Screen 
                    // options={{headerTitle:'首页'}} 删掉这个属性，因为需要动态修改
                    name="BottomTabs" 
                    component={BottomTabs}
                />
                <Stack.Screen name="Detail" component={Detail}/>
            </Stack.Navigator>);
    }
}
 
export default Navigator;

效果如下

ReactNative——导航器createBottomTabNavigator(底部标签导航器篇)

如何更改为自定义的标签名字？

如何更改标签选中的颜色？

将堆栈式导航器嵌套到标签导航器

将标签导航器嵌套到堆栈式导航器

如何动态修改标题栏？

运行npm error code ENOENTnpm error syscall opennpm error path C:\Users\ultra\Desktop\Vue-Project\pac

前端提高篇（102）：jQuery高级方法callbacks、deferred

【常见错误】npm ERR! code CERT_HAS_EXPIRED & errno CERT_HAS_EXPIRED

vue前端页面弹出红色报错遮罩层 Uncaught runtime errors:at handleError (webpack-internal:///./node_modules/webpack

npm ERR! code CERT_HAS_EXPIRED npm ERR! errno CERT_HAS_EXPIRED npm ERR! request to https://registry.

JQuery中的load()、$

《WEB前端框架开发技术》HTML5响应式旅游景区网站——榆林子州HTML CSS JavaScript (1)

文本，wangEditor5展示HTML无样式，wangEditor5如何看源码，Ctrl U看CSS文件，代码高亮，Prism.js可以实现，解决方法，参考网页源代码的写法

【html】新建一个html并且在浏览器运行

SSM基于html的网上购物系统2nluo 在线充值

前端哥

C#解析JSON的常用库--Newtonsoft.Json

jsonfield 项目常见问题解决方案

【SpringMVC】_SpringMVC项目返回HTML与JSON

BugJson因为json格式问题OOM怎么办

python 解读JSON文件，一文搞懂！

Redisson同时使用jackson、fastjson、kryo、protostuff序列化（含效率对比）

开源项目“Pretty JSON”安装与配置完全指南

2024年前端最新Nodejs基础之包管理工具npm(二)(2)，微软面试题及答案

解决全局安装pnpm后无法使用的问题

安装Nodejs后，npm无法使用

1
【Echarts系列】—— 实现电池图、3D立体圆形柱状图

2024-03-03 11:03:011001

2
CSS常用属性（文本属性）

2024-11-04 09:11:111000

3
TypeScript 中的 Number 类型，Number 类型的特性、常见操作和注意事项

2024-09-30 23:09:061000

4
CSS写代码使页面划分为左右两个区域

2024-09-09 00:09:071000

5
vue使用datav echarts

2024-09-06 00:09:381000

6
使用TweenMax.js和CSS3创建冰球运动员动画效果教程

2024-09-04 23:09:411000

7
使用CDN提高jQuery加载速度

2024-08-24 23:08:211000

8
小兔鲜儿网页首页制作黑马程序员前端基础项目自学笔记

2024-08-19 22:08:161000

9
《Vue》你的弹窗能拖动吗？Vue自定义指令实现可拖动弹窗

2024-08-19 22:08:121000

10
npm的使用

2024-08-18 00:08:131000