RN实现tabbar

最新推荐文章于 2024-08-22 09:19:21 发布

【03】

最新推荐文章于 2024-08-22 09:19:21 发布

阅读量554

点赞数

分类专栏：笔记文章标签： react-native

本文链接：https://blog.csdn.net/weixin_43840202/article/details/110353470

版权

笔记专栏收录该内容

35 篇文章 1 订阅

订阅专栏

这篇博客介绍了如何在React Native中结合使用@react-navigation/bottom-tabs和@react-navigation/stack来创建底部TabNavigator和StackNavigator导航。通过示例代码展示了如何配置底部导航栏图标，切换不同页面，并自定义头部navbar组件Logo。

摘要由CSDN通过智能技术生成

组件准备

@react-navigation/native
@react-navigation/stack
@react-navigation/bottom-tabs
react-native-vector-icons/Ionicons

核心代码

import React, {Component} from 'react';

import {NavigationContainer} from "@react-navigation/native";
import {createStackNavigator} from "@react-navigation/stack";
import {createBottomTabNavigator} from "@react-navigation/bottom-tabs";
import Ionicons from "react-native-vector-icons/Ionicons";
import HomePage from "./pages/Home";
import ListPage from "./pages/List";
import DetailPage from "./pages/Detail";
import Logo from "./components/Logo/index"
function BottonTab () {
    const Tab = createBottomTabNavigator();
    return (
        <Tab.Navigator
            screenOptions={({route}) => ({
                tabBarIcon: ({focused, color, size}) => {
                    let iconName;
                    switch (route.name){
                        case "首页":
                            iconName = "ios-home";
                            break;
                        case "列表":
                            iconName = "ios-list";
                            break;
                    }
                    return (
                        <Ionicons
                            name={iconName}
                            color={color}
                            size={size}
                        />
                    )
                }
            })}
            tabBarOptions={{
                activeTintColor: "#23b8ff",
                inactiveTintColor: "#999999"
            }}
        >
            <Tab.Screen
                name="首页"
                component={HomePage}
            />
            <Tab.Screen
                name="列表"
                component={ListPage}
            />
        </Tab.Navigator>
    )
}

class Txclass extends Component {
    constructor(props){
        super(props);
    }
    render(){
       const Stack = createStackNavigator();
        return (
            <NavigationContainer>
                <Stack.Navigator>
                    <Stack.Screen
                        name="Tab"
                        component={BottonTab}
                        options={{
                            headerTitle: props => <Logo {...props}/>
                        }}
                    />
                    <Stack.Screen
                        name="Detail"
                        component={DetailPage}
                        options={{
                            headerTitle: props => <Logo {...props}/>,
                            headerBackTitle: "返回"
                        }}
                    />
                </Stack.Navigator>
            </NavigationContainer>
        )
    }
}
export default Txclass;