首先先把需要的一些库引入
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 = createBot服务器托管网tomTabNavigator();
export服务器托管网 default function TabBar() {
return (
({
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 ;
},
})}>
// options={{headerShown: false}} 这个是 是否展示顶部导航
{headerShown: false}}/>
);
}
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 (
// 把底部导航栏引入
// 这里存放项目页面路由
// 至于里面的配置 你们可以可以搜一下去按照自己项目需求去配置
{
title: '设置',
headerStyle: {
backgroundColor: 'black',
},
headerTintColor: '#fff',
headerTitleStyle: {
fontWeight: 'bold',
},
}}
component={Setting}
/>
);
}
最后在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 (
);
};
export default App;
这个可以直接赋值粘贴只需要把文件创建一下即可
下面是文件目录
服务器托管,北京服务器托管,服务器租用 http://www.fwqtg.net