React Navigation 5.x BottomTab 使用

底部Tab导航

基本使用

导入

import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';

使用方式和Stack类似

    const RootTab = createBottomTabNavigator();
    return (
        <RootTab.Navigator screenOptions={screenOptionss} tabBarOptions={tabBarOptions}>
            <RootTab.Screen  name="Home" component={HomeScreen} options={{ tabBarBadge: 3, title: "首页" }} 
            />
            <RootTab.Screen name="Settings" options={{ tabBarBadge: 3, title: "设置" }} component={Setting} />
        </RootTab.Navigator>
    )
  • screenOptionss ,tabBarOptions 在这里可以对底部导航进行整体的一个属性控制
    const screenOptionss = ({ route }) => {
        return {
            tabBarIcon: ({ focused, color, size }) => {
                let img = require('./mine.png')
                //根据组件名称加载不同的图片
                if (route.name == "Home") {
                    img = require('./mine.png')
                } else {
                    img = require('./message.png')
                }
                //可以返回任何组件
                return <Image source={img}
                    style={[style.icon, { tintColor: color }]} />
            },
        }
    }
    //文本选中和非选中颜色 不会影响icon
    const tabBarOptions = {
        activeTintColor: 'tomato',
        inactiveTintColor: 'gray',
    }

内嵌StackNavigator

一般tab都和stack结合使用,大多数从tab页跳转到其他页面需要隐藏tab底部栏,官方推荐tab嵌入到stack中


    return (
        <NavigationContainer>
            { 
            <Stack.Navigator screenOptions={{headerShown:true}}>
                <Stack.Screen name="Tab" component={HomeTab} options={{title:"首页"}}  />
                <Stack.Screen name="List" component={ListScreen} />
                <Stack.Screen name="Profile" component={ProfileScreen} />
            </Stack.Navigator>
        </NavigationContainer>
    )

HomeTab

function HomeTab(params) {
    const RootTab = createBottomTabNavigator();
    //.... 
    return (
        <RootTab.Navigator screenOptions={screenOptionss} tabBarOptions={tabBarOptions}>
            <RootTab.Screen  name="Home" component={HomeScreen} options={{ tabBarBadge: 3, title: "首页" }} 
            />
            <RootTab.Screen name="Settings" options={{ tabBarBadge: 3, title: "设置" }} component={Setting} />
        </RootTab.Navigator>
    )
}

这样在HomeTab内嵌入stack中,所以在切换页面的时候还需要处理下导航栏(各个Tab页面共用的一个导航栏)
如下监听点击tab事件 改变标题 (这里使用dangerouslyGetParent()来获取stack的navigation)

class Setting extends Component {
   //...
    componentDidMount() {
        //监听点击tab事件 改变标题
        this.unsubscribe = this.props.navigation.addListener('tabPress', e => {
            // Prevent default action
            this.props.navigation.dangerouslyGetParent().setOptions({title:"设置"})
          });
    }
    componentWillUnmount(){
        this.unsubscribe ();
    } 
    //...
 }
posted @   菜鸟工程司  阅读(1004)  评论(0编辑  收藏  举报
编辑推荐:
· 智能桌面机器人:用.NET IoT库控制舵机并多方法播放表情
· Linux glibc自带哈希表的用例及性能测试
· 深入理解 Mybatis 分库分表执行原理
· 如何打造一个高并发系统?
· .NET Core GC压缩(compact_phase)底层原理浅谈
阅读排行:
· 手把手教你在本地部署DeepSeek R1,搭建web-ui ,建议收藏!
· 新年开篇:在本地部署DeepSeek大模型实现联网增强的AI应用
· 程序员常用高效实用工具推荐,办公效率提升利器!
· Janus Pro:DeepSeek 开源革新,多模态 AI 的未来
· 【译】WinForms:分析一下(我用 Visual Basic 写的)
点击右上角即可分享
微信分享提示