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;

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

下面是文件目录

相关推荐
薄雾晚晴3 分钟前
Rspack 实战:用 image-minimizer-webpack-plugin 做图片压缩,优化打包体积
javascript·vue.js
kymjs张涛25 分钟前
零一开源|前沿技术周刊 #15
前端·javascript·面试
古夕28 分钟前
Vue3 + vue-query 的重复请求问题解决记录
前端·javascript·vue.js
不知名程序员第二部28 分钟前
前端-业务-架构
前端·javascript·代码规范
Bug生产工厂28 分钟前
React支付组件设计与封装:从基础组件到企业级解决方案
前端·react.js·typescript
华仔啊29 分钟前
面试官:请解释一下 JS 的 this 指向。别慌,看完这篇让你对答如流!
前端·javascript
小高00731 分钟前
💥💥💥前端“隐藏神技”:15 个高效却鲜为人知的 Web API 大起底
前端·javascript
flyliu31 分钟前
再再次去搞懂事件循环
前端·javascript
wordbaby1 小时前
一行看懂高阶函数:用 handleConfirm 拿下 DatePicker 回调
前端·react.js
XiaoMu_0011 小时前
基于Node.js和Three.js的3D模型网页预览器
javascript·3d·node.js