RN实现tabbar

组件准备

@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 (
         ({
                tabBarIcon: ({focused, color, size}) => {
                    let iconName;
                    switch (route.name){
                        case "首页":
                            iconName = "ios-home";
                            break;
                        case "列表":
                            iconName = "ios-list";
                            break;
                    }
                    return (
                        
                    )
                }
            })}
            tabBarOptions={{
                activeTintColor: "#23b8ff",
                inactiveTintColor: "#999999"
            }}
        >
            
            
        
    )
}

class Txclass extends Component {
    constructor(props){
        super(props);
    }
    render(){
       const Stack = createStackNavigator();
        return (
            
                
                     
                        }}
                    />
                     ,
                            headerBackTitle: "返回"
                        }}
                    />
                
            
        )
    }
}
export default Txclass;

Logo 为头部navbar组件 createStackNavigator 是创建导航路由

最终效果