react native 实现自定义底部导航与路由文件配置

首先先把需要的一些库引入

yarn install @react-navigation/native

yarn install react-native-screens react-native-safe-area-context

yarn install @react-navigation/native-stack

yarn add @react-navigation/bottom-tabs

创建路由文件及四个底部导航页面

router文件下的bottomTab.jsx

这个文件主要就是app的底部导航配置

复制代码
import {createBottomTabNavigator} from '@react-navigation/bottom-tabs';
import { Image} from 'react-native';
//  引入自定义图片
import Home from '../views/home/index';
import User from '../views/user/index';
import Parking from '../views/parking/index';
import Detail from '../views/detail/index';

const Tab = createBottomTabNavigator();
export default function TabBar() {
  return (
    <Tab.Navigator
      screenOptions={({route}) => ({
        tabBarIcon: ({focused}) => {
          let iconName;
           // 自定义图标
          if (route.name === '首页') {
            iconName = focused ? require('../assets/icon/bottom/sy_seleted.png') : require('../assets/icon/bottom/sy.png');
          }else if(route.name === '车位'){
            iconName = focused ? require('../assets/icon/bottom/zcw_seleted.png') : require('../assets/icon/bottom/zcw.png');
          }else if(route.name === '订单'){
            iconName = focused ? require('../assets/icon/bottom/dd_seleted.png') : require('../assets/icon/bottom/dd.png');
          }else{
            iconName = focused ? require('../assets/icon/bottom/wd_seleted.png') : require('../assets/icon/bottom/wd.png');
          }
          return <Image source={iconName}></Image>;
        },
      })}>
       // options={{headerShown: false}} 这个是  是否展示顶部导航 
      <Tab.Screen name="首1页" component={Home}  options={{headerShown: false}}/>
      <Tab.Screen name="车位" component={Parking} />
      <Tab.Screen name="订单" component={Detail} />
      <Tab.Screen name="我的" component={User} />
    </Tab.Navigator>
  );
}

router文件下的index.jsx

这里面就是存放项目中路由的地方

复制代码
import React from 'react';
import {createNativeStackNavigator} from '@react-navigation/native-stack';
import BottomTabBar from './bottomTab'; // 引入底部TAB栏
import Setting from '../views/setting/index'; 
const Stack = createNativeStackNavigator();
// stack路由配置
export default function Navigation() {
  return (
    <Stack.Navigator>
      // 把底部导航栏引入
      <Stack.Screen
        name={'Navigation'}
        component={BottomTabBar}
      />
      //  这里存放项目页面路由
      //  至于里面的配置 你们可以可以搜一下去按照自己项目需求去配置
      <Stack.Screen
        name={'Setting'}
        options={{
          title: '设置',
          headerStyle: {
            backgroundColor: 'black',
          },
          headerTintColor: '#fff',
          headerTitleStyle: {
            fontWeight: 'bold',
          },
        }}
        component={Setting}
      />
    </Stack.Navigator>
  );
}

最后在app.jsx中引入即可

复制代码
import React from 'react';
import {View, Text} from 'react-native';

import {NavigationContainer} from '@react-navigation/native';

import Navigation from './src/router';


const App = () => {
  return (
  
    <NavigationContainer>
      <Navigation />
    </NavigationContainer>
  );
};
export default App;

这个可以直接赋值粘贴只需要把文件创建一下即可

下面是文件目录

相关推荐
gnip1 小时前
企业级配置式表单组件封装
前端·javascript·vue.js
掘金安东尼3 小时前
抛弃自定义模态框:原生Dialog的实力
前端·javascript·github
木西6 小时前
React Native DApp 开发全栈实战·从 0 到 1 系列(兑换-前端部分)
react native·web3·solidity
hj5914_前端新手7 小时前
javascript基础- 函数中 this 指向、call、apply、bind
前端·javascript
薛定谔的算法7 小时前
低代码编辑器项目设计与实现:以JSON为核心的数据驱动架构
前端·react.js·前端框架
Hilaku7 小时前
都2025年了,我们还有必要为了兼容性,去写那么多polyfill吗?
前端·javascript·css
LuckySusu7 小时前
【js篇】JavaScript 原型修改 vs 重写:深入理解 constructor的指向问题
前端·javascript
LuckySusu7 小时前
【js篇】如何准确获取对象自身的属性?hasOwnProperty深度解析
前端·javascript
LuckySusu7 小时前
【js篇】深入理解 JavaScript 作用域与作用域链
前端·javascript
LuckySusu7 小时前
【js篇】call() 与 apply()深度对比
前端·javascript