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

最新推荐文章于 2024-06-21 13:54:26 发布

原创

最新推荐文章于 2024-06-21 13:54:26 发布 · 3.1k 阅读

8 ·

CC 4.0 BY-SA版权

文章标签：

#react native #react.js #javascript #typescript #前端

本文详细介绍了如何使用ReactNavigation库创建底部标签导航器，包括设置自定义标签名字、改变选中颜色，以及实现从首页到详情页的跳转。同时，文章还展示了如何通过导航器嵌套来控制导航行为，如在跳转到详情页时隐藏底部标签导航器，并动态更新标题。

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

标签导航器官网链接

先安装依赖包

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>
        &l

最低0.47元/天解锁文章